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

Question

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

Answer 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>

Answer 2

jQuery.val()

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

Answer 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...

Answer 4

只需一行-

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

输出：[“值1”，“值2”]

如果你使用 .join()

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

输出：文本1、文本2、文本3

Answer 5

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.

Answer 6

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>   

J查询代码：

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

});

希望有用

Answer 7

就用这个

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

Answer 8

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

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

Answer 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.

Answer 10

这个 jQuery 很适合我。我将 getFormValues() 函数用于各种任务，因此它是在丢失某些表单数据时重建它的好地方。

它检查每个表单字段以查看它是否是多选类型，如果是，则使用所有选定的选项重建值。我确定复选框也需要类似的东西......

// Get form values as a key-value Object
function getFormValues(form) {
  var formData = new FormData(form[0]),
      values = Object.fromEntries(formData);
  
  // Rebuild multi-select values.
  $.each(values, function(key, value){
    var element = $(form).find(':input[name="'+key+'"]');
    if (element.is('select[multiple]')){
      values[key] = element.val();
    }
  });
  return values;
}

`

// Use with AJAX.
$('form').on('submit', function(e){
  e.preventDefault();
  var form = $(this);
  
  $.ajax({
    URL: 'http://google.com/',
    data: getFormValues(form),
    success: function(data, textStatus){
      console.log(data);
    },
    error: function(jqXHR, textStatus, errorThrown){
      console.log(textStatus, errorThrown);
    }
  });
});