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;
        });

我希望formdata中的值为：

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

Answer 1

我创建了一个对象（objVal）并使用.map()与.get()结合使用，为该对象添加一个包含所选值的数组（对象键是每个选择的名称）：< / p>

＆＃13;

$('#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);
});

＆＃13;

<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' />

＆＃13;

此示例的结果是：

enter image description here

Answer 2

$('form#add').find('select').each(function() {
    var that = $(this);
    var list = [];
    that.find('option').each(function() {
        var val = $(this).attr('value');
        list.push(val);
    });
    return list;
});

Answer 3

试

var ar = [];
$("select.list_class").each(function () {
    var obj = {};   
    obj[$(this).attr("name")] = $(this).children().map(function () {
        return this.value;
    }).get();
    ar.push(obj);

});
console.log(ar);

<强> DEMO

Answer 4

var result = {};

$("select option").each(function(){
    var list = $(this).parent().attr("name");
    if(list in result){
        result[list].push($(this).val());
    }else{
        result[list] = [].push($(this).val());  
    }
});

console.dir(result);

Answer 5

这个怎么样

var list1 = [], list2 = [], list3 = [];

var $list1 = $("#list1").find("option");
$list1.each(function () {
  var $option = $(this).attr("value");
  list1.push($option);
});

var $list2 = $("#list2").find("option");
$list2.each(function () {
  var $option = $(this).attr("value");
  list2.push($option);
});

var $list3 = $("#list3").find("option");
$list3.each(function () {
  var $option = $(this).attr("value");
  list3.push($option);
});

console.log(list1);
console.log(list2);
console.log(list3);

jsfiddle

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

5 个答案: