javascript - 如何迭代选定的<select multiple>中的选项？

Question

已经存在许多与此主题类似的问题，但我找不到任何解决此特定问题的问题。

如果我有一个 <select>允许多项选择的元素，如何仅迭代用户选择的元素。

接受 jQuery 和/或 Vanilla。

select{
    overflow:auto;
    width: 150px;
}

<select id="the_select" size="5" multiple>
  <option>Bob</option>
  <option>John</option>
  <option>Sam</option>
  <option>Jason</option>
  <option>Sarah</option>
</select>

http://jsfiddle.net/mtg73Lep/

<小时/>

类似的帖子没有帮助:

Iterate through <select> options - 适用于所有选项，而不仅仅是选定的选项

How to check if an item is selected from an HTML drop down list? - 不适用于multiple选择

Answer 1

试试这个:

$('select').change(function(){
  $('option:selected').each(function(){
    alert( $(this).text() );
  });
});

select{
    overflow:auto;
    width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select id="the_select" size="5" multiple>
  <option>Bob</option>
  <option>John</option>
  <option>Sam</option>
  <option>Jason</option>
  <option>Sarah</option>
</select>

<小时/>

另一个出色的(更好？绝对更酷!)建议，由常驻 j-Maven mplungjan 提供:

$("#the_select").on("change",function() { 
    console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) 
});