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

正如Pim指出的那样，手册很有用：

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

所以，上面的内容应该可行，但是jQuery已经为你做了幕后操作，所以这更容易：

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

如果它不适合您，可能是因为您的选项似乎没有价值。

Answer 2

记录.val（）函数的jQuery页面按字面意思告诉你该怎么做：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('');

    });
});

循环遍历多个选择组合框JQuery中的选定值

4 个答案: