在多个选择组合框中循环选定值JQuery

Question

我有以下情形。

我有一个组合框，其中有多个选择可用。

   <select id="a" multiple="multiple"> 
        <option value="">aaaa</option> 
        <option value="">bbbb</option> 
        <option value="">cccc</option> 
        <option value="">dddd</option> 
       </select> 

现在我也有一个按钮

<button type="button" id="display">Display</button> 

当此按钮，用户点击，它应该列出一个警告框的下拉的所有选定值

我的JS代码如下如下

$(document).ready(function() { 
       $('#display').click(function(){ 
        alert($('#a').val()); 
       }); 


     }); 

任何指针将不胜感激

Answer 1

你必须找到所有选定的选项：

jQuery(function($) { 
    $('#display').click(function() { 
     $('#a > :selected').each(function() { 
      alert($(this).text()); // using text() here, because the 
     });       // options have no value..? 
    }); 
}); 

---

手册，作为皮姆指出的那样，是有用的：

的.VAL（）方法主要用于获取表单元素的值。对于<select multiple="multiple">元素，.val()方法将返回一个包含每个选定选项的数组。

因此，上述应该工作，但jQuery的已经这样做了的场景，在你身后，所以这是很容易：

alert($('#a').val().join(", ")); 

如果它不为你工作，这可能是因为事实上你的选择似乎没有价值。

Answer 2

jQuery的页面字面上记录了.VAL（）函数告诉你该怎么做：http://api.jquery.com/val/

Answer 3

你试过each()？

Answer 4

关于下面的演示箱，我已经做了上述问题的东西。

演示：http://codebins.com/bin/4ldqp9w

HTML：

<select id="a" multiple="multiple"> 
    <option value=""> 
    aaaa 
    </option> 
    <option value=""> 
    bbbb 
    </option> 
    <option value=""> 
    cccc 
    </option> 
    <option value=""> 
    dddd 
    </option> 
    <option value=""> 
    eeee 
    </option> 
    <option value=""> 
    ffff 
    </option> 
    <option value=""> 
    gggg 
    </option> 
</select> 
<div id='result'> 
</div> 

<p> 
    <button type="button" id="display"> 
    Display 
    </button> 
</p> 
<p> 
    <button type="button" id="reset"> 
    Reset 
    </button> 
</p> 

CSS：

#a{ 
    display:inline-block; 
} 
#result{ 
    display:inline-block; 
} 

JQuery的：

$(document).ready(function() { 
    $('#display').click(function() { 

     var result = ''; 
     $('#a > :selected').each(function() { 
      result += "<div>" + $(this).text() + "</div>"; 
     }); 
     if (result == "") { 
      result = "<div>Please select any option(s)..!</div>"; 
     } 
     $("#result").html(result); 

    }); 
    $('#reset').click(function() { 
     $('#a > :selected').each(function() { 
      $(this).removeAttr('selected'); 
     }); 
     $("#result").html(''); 

    }); 
});