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

【问题标题】：Select or get all values from Select drop down array using Jquery or JavaScript使用 Jquery 或 JavaScript 从 Select 下拉数组中选择或获取所有值
【发布时间】：2014-02-18 13:42:51
【问题描述】：

我有以下 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>

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

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

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

我知道在为选择元素指定“id”时如何检查是否选择了任何值。但在这种情况下，我有一个数组的“名称”属性。

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

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

【问题讨论】：

标签： javascript jquery html javascript-events

【解决方案1】：

使用地图功能

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

console.log(selected);

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

我认为可以用:selected属性捕获选中的选项
是的，这是另一种解决方案 :)

【解决方案5】：

尝试这样做：

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

你必须获取change事件的值，所以用属性选择器获取元素，然后你可以获取目标元素的值。

【讨论】：

【解决方案6】：

如果你使用这个：

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

您将拥有一个值数组。

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

【讨论】：

【解决方案7】：

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

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

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

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

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

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

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

Here's a fiddle

【讨论】：