使用 Jquery 或 JavaScript 从 Select 下拉数组中选择或获取所有值

Select or get all values from Select drop down array using Jquery or JavaScript

提问by Deep

I have the following HTML code.

我有以下 HTML 代码。

<Select name=test[]>
  <option value="">--Please Select--</option>
  <option value="a">Test Value1</option>
</select>

<Select name=test[]>
  <option value="">--Please Select--</option>
  <option value="a">Test Value2</option>
</select>

<Select name=test[]>
  <option value="">--Please Select--</option>
  <option value="a">Test Value3</option>
</select>

Now before submitting the form I want to do the following

现在在提交表单之前我想做以下事情

1. Check if any of the above is selected.
2. If selected retrieve its value.

1. 检查是否选择了以上任何一项。
2. 如果选中，则检索其值。

I believe I need to loop around but I am unable to find the initial syntax with which I can first grab all the values.

我相信我需要循环，但我无法找到可以首先获取所有值的初始语法。

I know how to check if any value is selected when 'id' is given for a select element. But in this case I have the 'name' attribute which is an array.

我知道如何在为 select 元素提供 'id' 时检查是否选择了任何值。但在这种情况下，我有一个数组的 'name' 属性。

I tried looking at different places but I haven't really come across a good solution. Probably I missed something.

我尝试查看不同的地方，但我还没有真正遇到好的解决方案。可能我错过了什么。

Please let me know if any further information is required.

如果需要任何进一步的信息，请告诉我。

回答by Pham

using map function

使用地图功能

var selected = $('select[name="test[]"]').map(function(){
    if ($(this).val())
        return $(this).val();
}).get();

console.log(selected);

回答by Cpt Balu

The following will let you iterate through select tags which has any selected value other than default "". You can adjust it to any other unwanted values etc.

以下将让您遍历选择标签，这些标签具有除默认值“”以外的任何选定值。您可以将其调整为任何其他不需要的值等。

$("select[name='test[]']").each(function(){
    if($(this).val()!='')
    {
        //doStuff
    }
});

回答by Carl

This isn't a complete solution, but may hopefully point you in the right direction (assuming your using jQuery)

这不是一个完整的解决方案，但可能会为您指明正确的方向（假设您使用 jQuery）

The below code should loop through your selects (when they have the name='test[]') and add any values (that aren't blank) to the result array.

下面的代码应该遍历您的选择（当它们有 时name='test[]'）并将任何值（非空白）添加到结果数组中。

var results = [];
$("select[name='test[]']").each(function(){
    var val = $(this).val();
    if(val !== '') results.push(val);  
});
console.log(results);

Demo: http://jsfiddle.net/W2Mam/

演示：http: //jsfiddle.net/W2Mam/

回答by Alberto Fecchi

you can check and save boxes values this way

您可以通过这种方式检查和保存框值

var results = [];
$("select[name='test[]']").each(function(index, val) 
{
   if ($(val).val() == "") { 
       //Not selected 
   }
   else
   {
       //Selected
   }
   //Save results in an array based on the index of selects
   results[index] = $(val).val();
});

then you can iter through the array and check values based on index (or you can just check it above on the .each() function)

然后你可以遍历数组并根据索引检查值（或者你可以在 .each() 函数上检查它）

回答by Jai

Try to do this way:

尝试这样做：

$("select[name='test[]']").on('change', function(){
    if(this.value != ""){
        alert(this.value);
     }else{
        alert('no values selected');
        return false;
     }
});

---

---

You have to get values on the event of changeso get the elems with attribute selectors and then you can get the values of target elem.

您必须获取事件的值，change因此使用属性选择器获取元素，然后才能获取目标元素的值。

回答by Karl-André Gagnon

If you use this :

如果你使用这个：

var values = $('select[name^="test["]').map(function(){
    if(this.value !== "") return this.value;
})

You'll have an array of values.

您将拥有一组值。

To check if one is selected, just check the length : values.length

要检查是否选择了一个，只需检查长度： values.length

回答by billyonecan

You can use filter()to return only the selectswhich have a value, and then map()to get their values:

您可以使用filter()仅返回selects具有值的 ，然后map()获取它们的值：

var values = $('select[name="test[]"]').filter(function() {
  return $.trim(this.value).length;  
}).map(function() {
  return this.value;
}).get();

Obviously with this you won't know which select has which value, if you need to know, you'd have to use the elements' index as that's its only unique identifier (given your markup).

显然，这样您将不知道哪个选择具有哪个值，如果您需要知道，您必须使用元素的索引，因为这是它唯一的唯一标识符（给定您的标记）。

The following would return an array of objects containing the elements' index, and its value:

以下将返回一个包含元素索引及其值的对象数组：

var values = $('select[name="test[]"]').filter(function() {
  return $.trim(this.value).length;  
}).map(function() {
  return { index: $(this).index(), value: this.value };
}).get();

To check if anything was selected, you'd just check values.length:

要检查是否选择了任何内容，您只需检查values.length：

if (!values.length) {
  alert('Nothing was selected');
}

Here's a fiddle

这是一把小提琴