Question

（newb警告）

所以我有一个<select>标记，其中包含许多<option>标记，我想用jQuery一次性对所有标记执行操作。

  <select id="select" multiple>
    <option id = "1" value="1">1</option>
    <option id = "2" value="234567890">234567890</option>
    <option id = "3" value="better">better</option>
    <option id = "4" value="world">world</option>
    <option id = "5" value="betting">betting</option>
    <option id = "6" value="wors">wors</option>
    <option id = "7" value="worsecter">worsecter</option>
    <option id = "8" value="bet2rand">bet2rand</option>
    <option id = "9" value="gom">gom</option>
  </select>

如何选择它们？

$('#select option') 无法工作。

帮助。

编辑对于这些失败的选民：

这是我的完整代码，看看它是否有效。该死。

selector.js

jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
        return this.each(function() {
            var select = this;
            var options = [];
            $('#select').find('option').each(function() {
                options.push({value: $(this).val(), text: $(this).text()});
            });
            $('#select').data('options', options);
            $('#textbox').bind('change keyup', function() {
                var options = $(select).empty().data('options');
                var search = $(this).val().trim();
                var regex = new RegExp(search,"gi");

                $.each(options, function(i) {
                    var option = options[i];
                    if(option.text.match(regex) !== null) {
                        $('#select').append(
                           $('<option>').text(option.text).val(option.value)
                        );
                    }
                });
                if (selectSingleMatch === true && $(select).children().length === 1) {
                    $('#select').children().get(0).selected = true;
                }
            });
        });
    };

    $(function() {
        $('#select').filterByText($('#textbox'), true);
    });

    $(document).ready( function () {
        $('#submit').click( function() {
            $('#select option').each( function () {
                $(this).hide();
            });
        });
    });

selector.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Sandbox</title>
  <script src="jquery-1.7.1.js"></script>
  <script src="selector.js"></script>
  <link rel = "stylesheet" href = "selector.css">
</head>
<body>

  <input id="textbox" type="text" />
  <br>
  <br>

  <select id="select" multiple>
    <option id = "1" value="1">1</option>
    <option id = "2" value="234567890">234567890</option>
    <option id = "3" value="better">better</option>
    <option id = "4" value="world">world</option>
    <option id = "5" value="betting">betting</option>
    <option id = "6" value="wors">wors</option>
    <option id = "7" value="worsecter">worsecter</option>
    <option id = "8" value="bet2rand">bet2rand</option>
    <option id = "9" value="gom">gom</option>
  </select>

  <br>
  <button id = "submit">OK!</button>

</body>
</html>

Answer 1

你误解了这个问题。

如果您在代码中添加日志语句，然后查看控制台输出（此处为a live demo），则可以看到每个选项都已选中。

如果您检查DOM，则可以看到每个选项都添加了style="display: none;"。

问题在于，您无法display: none <option>元素。

如果要隐藏它，则必须完全从选择中删除它。例如使用remove()代替hide()（根据this example）。

Answer 2

我们可以使用每个函数一键获取所有选定的值。

function getSelVal(){
    var foo = []; 
    var arr="";
    $('#mysel :selected').each(function(i, selected){ 
         foo[i] = $(selected).text(); 
         arr=arr+$(selected).text()+",";
    });
         arr=arr.substr(0,arr.length-1);
         $('#txtSelValues').val(arr);
}


<select id="mysel" multiple>
   <option id = "1" value="1">1</option>
   <option id = "2" value="234567890">234567890</option>
   <option id = "3" value="better">better</option>
   <option id = "4" value="world">world</option>
   <option id = "5" value="betting">betting</option>
   <option id = "6" value="wors">wors</option>
   <option id = "7" value="worsecter">worsecter</option>
   <option id = "8" value="bet2rand">bet2rand</option>
   <option id = "9" value="gom">gom</option>
</select>

请在此处查看一次JSFiddle link here

Answer 3

尝试这样的事情

$('#select option').prop('selected', true);

<强>编辑：在执行此操作之前，需要将MULTIPLE属性设置为首先选择标记

快乐编码：）

jQuery：在<select>标签</select> </option>中选择所有<option>标签

3 个答案: