javascript - 获取表单的多个下拉值并在 jquery 中作为查询字符串发送

Question

我有一个具有多个属性的下拉列表的表单。现在单击按钮我想在键名称上创建值数组作为下拉列表名称。但我无法执行此操作。我必须使用 ajax

在查询字符串中发送每个下拉列表的数据

HTML

<select multiple=""  style="width: 147px;" id="list" name="list" class ="list_class">
        <option value="21">A</option>
        <option value="22">B</option>
        <option value="23">C</option>
        <option value="24">D</option>
        <option value="2">E</option>
    </select>

    <select multiple=""  style="width: 147px;" id="list1" name="list1" class ="list_class">
        <option value="22">B</option>
        <option value="24">D</option>
        <option value="2">E</option>
    </select>
    <select multiple=""  style="width: 147px;" id="list2" name="list2" class ="list_class">
        <option value="22">B</option>
        <option value="24">D</option>
        <option value="2">E</option>
    </select>

在按钮上单击我这样做是为了获取值:

$('form#add').find('select, input:text').each(function() {
            var inputName = $(this).attr("name");
            var inputValue = $(this).val();
            formData +='&'+inputName+'='+inputValue;
        });

我希望表单数据中的值为:

list = ['21','22','23','24','2']
    list1 = ['23','24','2']
    list2 = ['22','24','2']

Answer 1

我创建一个对象 (objVal) 并使用 .map()结合 .get()将包含所选值的数组添加到该对象(对象键是每个选择的名称):

$('#add').on("click", function() {
  var objVal = {};
  $('select').each(function() {
    var arr = $(':selected', this).map(function() {
      return this.value;
    }).get();
    objVal[$(this).attr("name")] = arr;
  });
  console.log(objVal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="" style="width: 147px;" id="list" name="list" class="list_class">
  <option value="21">A</option>
  <option value="22">B</option>
  <option value="23">C</option>
  <option value="24">D</option>
  <option value="2">E</option>
</select>
<select multiple="" style="width: 147px;" id="list1" name="list1" class="list_class">
  <option value="22">B</option>
  <option value="24">D</option>
  <option value="2">E</option>
</select>
<select multiple="" style="width: 147px;" id="list2" name="list2" class="list_class">
  <option value="22">B</option>
  <option value="24">D</option>
  <option value="2">E</option>
</select>
<input type='button' id='add' />

这个例子的结果是: