如何使用 jquery 遍历多个选择选项答案

【问题标题】：how to iterate through multiple select options with jquery如何使用 jquery 遍历多个选择选项
【发布时间】：2009-08-04 13:56:26
【问题描述】：

我只是想知道是否可以通过多个选择选项并获取它们的值和文本（如果选择了一个，则获取值和文本，如果选择了 2，则获取它们的值和文本等等）

我在一页中有 15 个选择框？

任何帮助将不胜感激。

 <form>
        <select class="select" name="select3" id="select3">
          <option value="0">0</option>
          <option value="1.99">1</option>
          <option value="1.99">2</option>
          <option value="1.99">3</option>
          <option value="1.99">4</option>
          <option value="1.99">5</option>
          <option value="1.99">6</option>
          <option value="1.99">7</option>
          <option value="1.99">8</option>
        </select>
        </form>

  <form> 
      <select  class="select" name="select" id="select">
            <option value="0">0</option>
            <option value="1.99">1</option>
            <option value="1.99">2</option>
            <option value="1.99">3</option>
            <option value="1.99">4</option>
            <option value="1.99">5</option>
            <option value="1.99">6</option>
            <option value="1.99">7</option>
            <option value="1.99">8</option>
          </select>
   </form>

所有选择选项都具有相同的类。

谢谢

【问题讨论】：

标签： jquery

【解决方案1】：

这将提醒所有选定选项的文本和值（对于页面上的所有选择）：

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

查看 Core/each 和 Selectors/selected：

http://docs.jquery.com/Core/each

http://docs.jquery.com/Selectors/selected

【讨论】：

这是一个定义不明确的用例，其中类、名称、id 和标签都是相同的名称。 $('select >... , $('#select >... , $(.select... 都可以工作

【解决方案2】：

对于 optgroups...

$("select[id^='desu']").children('optgroup').children('option:selected').each( 
    function(id, element) {
        document.write(element.title);
    }
);

【讨论】：

啊，children() 函数——正是我想要的！

【解决方案3】：

此函数将为与给定类匹配的选择返回一个文本/值对数组。

function getSelects(klass) {
    var selected = [];
    $('select.' + klass).children('option:selected').each( function() {
        var $this = $(this);
        selected.push( { text: $this.text(), value: $this.val() } );
    });
    return selected;
}

【讨论】：

【解决方案4】：

如果您的所有选择框都以相似的 id 开头（“select_1”、“select_2”、“select_3”等），您可以这样做：

var arr = [];
$("select[id^='select_']").children('option:selected').each(function(){
  //you will do this once for every selected item...
}

这允许您仅循环通过特定的选择框，以防您有多个分组。

【讨论】：

感谢您的回复。我可以在上面的代码中使用 .change 函数吗，例如 .... .change.each(function() {
好吧，如果您将更改包装在匿名函数中 yes .change( function(){ $('select').each ..... });

【解决方案5】：

https://jsfiddle.net/kmgoddard/Lfkvm3ar/4/

$("#mybutton").click(function(){
list = new Array();
$('select > option:selected').each(function() {

  list.push($(this).val());

});
 alert(list.toString());
});

【讨论】：

【解决方案6】：

//Another option

var selected = [];

$('select :has(:selected)').each( function(){

    var $this = $(this);
    selected.push( { text: $this.text(), value: $this.val() );

});

return selected;

【讨论】：