javascript - 提交时从javascript中的多个选择中获取数据

Question

我需要帮助，以便在按下提交按钮时将我的多选数据获取到我的 javascript 数据字符串中。

所以我有这个选择:

<select multiple class="form-control" name="DivisionSelect[]">
  <option value="|TD">Traffic Division</option>
  <option value="|CP">Metro - C Platoon</option>
  <option value="|DP">Metro - D Platoon</option>
</select>

如果选择了交通和 D 排，我希望所选数据像这样彼此相邻排列:“|TD|DP”。我该怎么做？

Answer 1

您可以使用 join()在 select值并将其添加到字符串。

$('select').change(function() {
  var str = '&Divs="' + $(this).val().join('') + '"';
  console.log(str)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple class="form-control" name="DivisionSelect[]">
  <option value="|TD">Traffic Division</option>
  <option value="|CP">Metro - C Platoon</option>
  <option value="|DP">Metro - D Platoon</option>
</select>

要在表单提交上获取此值，您可以使用 submit事件 form并获得 select 的值(value)使用 find

$('form').submit(function(e) {
  e.preventDefault();
  
  var value = $(this).find('select[name="DivisionSelect[]"]').val();
  var str = '&Divs="' + (value ? value.join('') : '') + '"';
  console.log(str)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <select multiple class="form-control" name="DivisionSelect[]">
  <option value="|TD">Traffic Division</option>
  <option value="|CP">Metro - C Platoon</option>
  <option value="|DP">Metro - D Platoon</option>
</select>
  <br>
  <input type="submit" value="Submit">
</form>