选择Box获取所有选项值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>

如果用户选择all选项，我需要获得所有其他选项值，如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());
        });
    }
});

有什么想法吗？

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

DEMO

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”]

FIDDLE DEMO

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

Answer 4

更新到：

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

---

而不是.live()使用.on()方法：

$(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 etc.。

---

关于.map()：

的附注

我需要提一下.map()在ie7等传统浏览器中不起作用。为此，您可以使用下面提到的代码并使用.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);
    }
});

Answer 5

它有效here

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

              });
          }

         });
});

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

     });
});

workind Demo

Answer 7

使用 ，而不是使用直播

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

Demo

Answer 8

<强> Demo  使用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)
        });
    }

});

Answer 9

您可以使用children和map

实现同样的目标

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