blocks|key|986437|text|jQuery+.val()|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|986438|++var+foo+=+$('#multiple').val();+|code-block|syntax|javascript|986439|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/val/#val1^0|0|D|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<a href="http://api.jquery.com/val/#val1" rel="noreferrer">jQuery .val()</a>

<pre><code> var foo = $('#multiple').val(); 
</code></pre>

blocks|key|986415|text|在多选列表上使用.val()函数将返回所选值的数组：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|986416|var+selectedValues+=+$('#multipleSelect').val();|code-block|syntax|javascript|986417|在你的html中：|986418|<select+id="multipleSelect"+multiple="multiple">
++++<option+value="1">Text+1</option>
++++<option+value="2">Text+2</option>
++++<option+value="3">Text+3</option>
</select>|986419|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/val/^0|8|6|8|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Using the <a href="http://api.jquery.com/val/" rel="noreferrer"><code>.val()</code></a> function on a multi-select list will return an array of the selected values:

<pre><code>var selectedValues = $('#multipleSelect').val();
</code></pre>

and in your html:

<pre><code>&lt;select id="multipleSelect" multiple="multiple"&gt;
 &lt;option value="1"&gt;Text 1&lt;/option&gt;
 &lt;option value="2"&gt;Text 2&lt;/option&gt;
 &lt;option value="3"&gt;Text 3&lt;/option&gt;
&lt;/select&gt;
</code></pre>

blocks|key|1201094|text|您也可以使用js+map函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1201095|$("#multipleSelect+:selected").map(function(i,+el)+{
++++return+$(el).val();
}).get();|code-block|syntax|javascript|1201096|然后，您可以获得option元素的任何属性：|offset|length|style|CODE|1201097|return+$(el).text();
return+$(el).data("mydata");
return+$(el).prop("disabled");
etc...|1201098|entityMap^0|0|0|8|6|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You can also use js map function:

<pre><code>$("#multipleSelect :selected").map(function(i, el) {
 return $(el).val();
}).get();
</code></pre>

And then you can get any property of the <code>option</code> element:

<pre><code>return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...
</code></pre>

blocks|key|986647|text|var+selected=[];
+$('#multipleSelect+:selected').each(function(){
+++++selected[$(this).val()]=$(this).text();
++++});
console.log(selected);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|986648|这是解决这个问题的另一种方法。选定的数组将以索引作为选项值，而每个数组项将以文本作为其值。|unstyled|986649|例如|986650|<select+id="multipleSelect"+multiple="multiple">
++++<option+value="abc">Text+1</option>
++++<option+value="def">Text+2</option>
++++<option+value="ghi">Text+3</option>
</select>|986651|如果选择了选项1和2。|986652|选定的阵列将为：|986653|selected['abc']=1;+
selected['def']=2.|986654|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$B|C]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$B|C]]|$1|Q|3|-4|5|F|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<pre><code>var selected=[];
 $('#multipleSelect :selected').each(function(){
 selected[$(this).val()]=$(this).text();
 });
console.log(selected);
</code></pre>

Yet another approch to this problem. The selected array will have the indexes as the option values and the each array item will have the text as its value.

for example

<pre><code>&lt;select id="multipleSelect" multiple="multiple"&gt;
 &lt;option value="abc"&gt;Text 1&lt;/option&gt;
 &lt;option value="def"&gt;Text 2&lt;/option&gt;
 &lt;option value="ghi"&gt;Text 3&lt;/option&gt;
&lt;/select&gt;
</code></pre>

if say option 1 and 2 are selected.

the selected array will be : 

<pre><code>selected['abc']=1; 
selected['def']=2.
</code></pre>

blocks|key|1201287|text|只差一行-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1201288|var+select_button_text+=+$('#SelectQButton+option:selected')
++++++++++++++++.toArray().map(item+=>+item.text);|code-block|syntax|javascript|1201289|输出："text1"，"text2“|1201290|var+select_button_text+=+$('#SelectQButton+option:selected')
++++++++++++++++.toArray().map(item+=>+item.value);|1201291|输出："value1"，"value2“|1201292|如果使用.join()|1201293|var+select_button_text+=+$('#SelectQButton+option:selected')
++++++++++++++++.toArray().map(item+=>+item.text).join();|1201294|输出:+text1、text2、text3|1201295|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Just by one line-

<pre><code>var select_button_text = $('#SelectQButton option:selected')
 .toArray().map(item =&gt; item.text);
</code></pre>

Output: ["text1", "text2"]

<pre><code>var select_button_text = $('#SelectQButton option:selected')
 .toArray().map(item =&gt; item.value);
</code></pre>

Output: ["value1", "value2"]

If you use .join()

<pre><code>var select_button_text = $('#SelectQButton option:selected')
 .toArray().map(item =&gt; item.text).join();
</code></pre>

Output: text1,text2,text3

blocks|key|1201178|text|Html代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1201179|+<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>+++|code-block|syntax|javascript|1201180|JQuery代码：|1201181|$('#multiple+:selected').each(function(i,+sel){+
++++alert(+$(sel).val()+);+

});|1201182|希望它能起作用|1201183|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Html Code:

<pre><code> &lt;select id="multiple" multiple="multiple" name="multiple"&gt;
 &lt;option value=""&gt; -- Select -- &lt;/option&gt;
 &lt;option value="1"&gt;Opt1&lt;/option&gt;
 &lt;option value="2"&gt;Opt2&lt;/option&gt;
 &lt;option value="3"&gt;Opt3&lt;/option&gt;
 &lt;option value="4"&gt;Opt4&lt;/option&gt;
 &lt;option value="5"&gt;Opt5&lt;/option&gt;
 &lt;/select&gt; 
</code></pre>

JQuery Code:

<pre><code>$('#multiple :selected').each(function(i, sel){ 
 alert( $(sel).val() ); 

});
</code></pre>

Hope it works

blocks|key|1201219|text|就用这个吧|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1201220|$('#multipleSelect').change(function()+{
++++var+selectedValues+=+$(this).val();++
});|code-block|syntax|javascript|1201221|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just use this

<pre><code>$('#multipleSelect').change(function() {
 var selectedValues = $(this).val(); 
});
</code></pre>

blocks|key|986692|text|获取逗号分隔符中的选定值|type|unstyled|depth|inlineStyleRanges|entityRanges|data|986693|var+Accessids+=+"";
$(".multi_select+.btn-group>ul>li+input:checked").each(function(i,obj)
{
++++Accessids=Accessids%2B$(obj).val()%2B",";
});
Accessids+=+Accessids.substring(0,Accessids.length+-+1);
console.log(Accessids);|code-block|syntax|javascript|986694|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Get selected values in comma separator 

<pre><code>var Accessids = "";
$(".multi_select .btn-group&gt;ul&gt;li input:checked").each(function(i,obj)
{
 Accessids=Accessids+$(obj).val()+",";
});
Accessids = Accessids.substring(0,Accessids.length - 1);
console.log(Accessids);
</code></pre>

blocks|key|986835|text|如果您在单个页面上有多个选择框，并且它们都具有相同的类，那么在使用多个选择框而不是跟踪id的情况下，您可以使用相同的类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|986836|$('.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.|code-block|syntax|javascript|986837|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In case if you have multiple select boxes on a single page and they all have the same class which you can prefer in case of multiple rather than tracking id's:
<pre><code>$('.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.
</code></pre>

How to get multiple select box values using jQuery?

How to get multiple select box values using jQuery?

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

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

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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