如何使用 jQuery 获取多个选择框值？

Posted 2023-02-22

【中文标题】如何使用 jQuery 获取多个选择框值？

【英文标题】：How to get multiple select box values using jQuery?

【发布时间】：2011-03-15 16:22:15

【问题描述】：

如何使用 jQuery 获取多个选择框的值？

【参考方案1】：

在多选列表上使用.val() 函数将返回一个包含所选值的数组：

var selectedValues = $('#multipleSelect').val();

在你的 html 中：

<select id="multipleSelect" multiple="multiple">
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

【讨论】：

如果你想得到Text 1而不是价值怎么办？将.val() 替换为.text()?

值得注意的是，没有任何选择的多重选择返回null，而不是一个空数组。这意味着，如果您以编程方式添加一个选定的值，您需要做一些杂耍才能使其正确。

谢谢！使用 jQuery 从元素中获取值的方法有很多，因此很难找到您正在寻找的方法。

@Leo 您可以添加一个 coalesc 来解决空问题，例如 var selectedValues = $('#multipleSelect').val() || []; 还值得注意的是它返回一个字符串数组。我正在比较一个整数并且没有匹配，所以我添加了一个.toString()。

【参考方案2】：

jQuery .val()

  var foo = $('#multiple').val(); 

【参考方案3】：

也可以使用js的地图功能：

$("#multipleSelect :selected").map(function(i, el) 
    return $(el).val();
).get();

然后你可以得到option元素的任何属性：

return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...

【讨论】：

很好的答案，但无需为每个选项支付将 el 包装为 jQuery 对象的额外费用。当它不太奇怪时，直接离开 DOM。您可以将 $(el).val() 更改为 el.value。当然，如果您习惯了 jQuery，或者想像其他示例一样获取数据或属性，那么 jQuery 不会伤害任何人。

@KyleMit 很棒的提示。刚刚使用这种方法来获取隐藏字段值的集合，并且效果很好。

【参考方案4】：

var selected=[];
 $('#multipleSelect :selected').each(function()
     selected[$(this).val()]=$(this).text();
    );
console.log(selected);

解决这个问题的另一种方法。所选数组将索引作为选项值，每个数组项将文本作为其值。

例如

<select id="multipleSelect" multiple="multiple">
    <option value="abc">Text 1</option>
    <option value="def">Text 2</option>
    <option value="ghi">Text 3</option>
</select>

如果选择了选项 1 和 2。

选定的数组将是：

selected['abc']=1; 
selected['def']=2.

【参考方案5】：

HTML代码：

 <select id="multiple" multiple="multiple" name="multiple">
  <option value=""> -- Select -- </option>
  <option value="1">Opt1</option>
  <option value="2">Opt2</option>
  <option value="3">Opt3</option>
  <option value="4">Opt4</option>
  <option value="5">Opt5</option>
 </select>   

JQuery 代码：

$('#multiple :selected').each(function(i, sel) 
    alert( $(sel).val() ); 

);

希望有效果

【讨论】：

嘿伙计。它完美地工作。看看这个。你应该希望它。不要发表无关的评论..

这是 jQuery 的低效用法。更好的方法是使用这样的 ID 选择器作为开头：$('#multiple').find(':selected')@Prabhagaran

@YounisShah 我几乎不会说它“效率低下”，因为时差与相对论无关......

【参考方案6】：

获取逗号分隔符中的选定值

var Accessids = "";
$(".multi_select .btn-group>ul>li input:checked").each(function(i,obj)

    Accessids=Accessids+$(obj).val()+",";
);
Accessids = Accessids.substring(0,Accessids.length - 1);
console.log(Accessids);

【参考方案7】：

就用这个

$('#multipleSelect').change(function() 
    var selectedValues = $(this).val();  
);

【参考方案8】：

只差一行-

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text);

输出：["text1", "text2"]

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.value);

输出：["value1", "value2"]

如果你使用 .join()

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text).join();

输出：text1,text2,text3

【参考方案9】：

如果您在单个页面上有多个选择框并且它们都具有相同的类，您可以更喜欢在多个而不是跟踪 id 的情况下：

$('.classname option:selected').map(function()
    return this.value; // If you want value.
    // Or you could also do.
    return this.text; // If you want text of select boxes.
).get(); // It will return an Array of selected values/texts.