选择框获取所有选项的值jquery

Question

<select id="selectBox">
    <option value="all">all</option>
    <option value="0">Number 0</option>
    <option value="1">Number 1</option>
    <option value="2">Number 2</option>
    <option value="3">Number 3</option>
    <option value="4">Number 4</option>
    <option value="5">Number 5</option>
    <option value="6">Number 6</option>
    <option value="7">Number 7</option>
</select>

如果用户选择了全部选项，我需要获取所有其他选项的值，如0、1、2、3、4、5、6、7。

我的代码是：

$("#selectBox").live('change', function () {
    var val = this.value;
    if (val == "all") {
        $("#selectBox>option").map(function () {
            alert($(this).val());
        });
    }
});

有什么想法吗？

- Just in Mind

---

获取所有其他选项值...然后你打算用它做什么？ - Ja͢ck

Answer 1

尝试使用.map()和.get()来完成您的任务。

var val=this.value;
var allValues = null;

if (val=="all") {
  allValues = $("#selectBox > option:not(:first)").map(function() {
       return this.value;
  }).get();  //[0,1,2,3,4,5,6,7]
}

完整的代码如下：

$("#selectBox").live('change',function(){
    var val=this.value;
    var allValues = null;

    if (val=="all") {
      allValues = $("#selectBox > option:not(:first)").map(function() {
           return this.value;
      }).get();  //[0,1,2,3,4,5,6,7]
    }
});

演示

- Rajaprabhu Aravindasamy

---

@FrédéricHamidiq 抱歉，我在考虑使用.filter()，根据您的评论进行了更正..！ - Rajaprabhu Aravindasamy

Answer 2

建议您使用 on，因为它是推荐的方法，您可以通过使用 map 来获取所有选项：

 $("#selectBox").on('change', function () {
    var val = this.value;
    if (val === "all") {

        var all = $("#selectBox>option").map(function () {
        if($(this).val() !== "all")
            return $(this).val();

        });
    }
    console.log(all)

});

输出：

["0", "1", "2", "3", "4", "5", "6", "7"]

演示代码

- Ehsan Sajjad

Answer 3

请尝试以下操作

:gt(0) 去除第一个数值，无论是'all'还是'select'(在我的演示中)

$("#selectBox").on('change', function () {
    var val = this.value;
    var urarr=[]
    if (val == "all") {
        $("#selectBox>option:gt(0)").each(function () {
            urarr.push($(this).val())
        });
    }
    alert(urarr)

});

DEMO

- Sridhar R

Answer 4

更新为：

var val = this.value, 
    allValues = '';
if (val=="all") {
     allVals = $("#selectBox > option").map(function() {
          return this.value !== 'all';
     }).get();
     console.log(allVals);
}

同时，使用.on()方法替代.live()方法：

$(document.body).on('change', '#selectBox', function(){
    var val = this.value, 
    allVals = '';
    if (val=="all") {
       allVals = $("#selectBox > option").map(function() {
            return this.value !== 'all';
       }).get();
       console.log(allVals);
    }
});

---

最新的jQuery库中已经移除了.live()方法，所以要使用事件委托，您需要使用.on()方法来绑定在动态生成元素上的事件，具体语法如下：

$(staticParent).on(event, selector, callback);

---

$(document.body)可以被任何静态父元素（如div, table等）替换。

---

关于.map()的附注：

我需要提到，在像ie7这样的旧浏览器中，.map()无法正常工作。在这种情况下，您可以使用以下代码，结合使用.each()和.push()：

$(document.body).on('change', '#selectBox', function(){
    var val = this.value, 
    allVals = [];
    if (val=="all") {
       $("#selectBox > option").each(function() {
            allVals.push(this.value);
       });
       console.log(allVals);
    }
});

- Jai

Answer 5

它在这里运作

$(document).ready(function(){
$("#selectBox").on('change',function()
         {
          var val=this.value;
           if (val=="all") {
            $("#selectBox>option").map(function() {
              alert($(this).val());

              });
          }

         });
});

- Bazzinga...

Answer 6

试试这个：

$(document).ready(function() {
    $("#selectBox").live('change',function()
    {
      var val=this.value;
      if (val=="all") {
          var values = $("#selectBox>option").not('option[value=all]').map(function() {
                 return this.value;
          }).get().join();      
        alert(values);
       }

     });
});

正在工作 演示

- Bhushan Kawadkar

Answer 7

使用 on 而不是使用 live

$("#selectBox").on('change',function()
             {                
              var val=this.value;
               if (val=="all") {
               $("#selectBox  option").each(function() {
    alert(this.text + ' ' + this.value);
                });                
              }    
             });

演示

- Amit Kumar

Answer 8

演示 使用filter()

$("#selectBox").on('change', function () {
    var val = this.value;
    if (val == "all") {

        var test = $("#selectBox option").filter(function (i, valu) {

            return val != valu.value
        }).get();

        // if you jquery object 
        alert(test)
        // if you need value do like this
        $(test).each(function (i, val) {
            alert(val.value)
        });
    }

});

- Balachandran

Answer 9

你可以使用children和map来实现同样的功能。

mapValue= $("select#selectBox").children().not(":first").map(function() {
        return $(this).val();
}).get();

- Runcorn