Question

我有这个选择

<select name="clients[]" size="20" multiple="multiple" id="clients" style="min-width:275px;">
<option id="first">First</option>
<option id="second">Second</option>
<option id="third">Third</option> 
</select>

我正在尝试将此警告框显示在id = first时，我已尝试

$(document).ready(function(){
    if($('#clients option:selected').val() == 'first'){
        alert('hi');
    }
});

但没有出现......我做错了什么

Answer 1

值为First，而不是first。由于您未提供value属性，因此option元素的内容将被视为值。

请注意您使用多选字段。在这种情况下，浏览器不会在页面^*上选择一个元素，因此只有在选择变为chages时测试first才有意义。

您必须检查First是否是所选元素之一：

$('#clients').change(function(){
      if($(this).children('option:selected').filter('#first').length) {
          alert('hi');
      }
});

DEMO

另一种选择是正确设置value属性而不是ID，并查看值是否在values数组中：

HTML：

<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option>

JS：

$('#clients').change(function(){
      if($.inArray("first", $(this).val()) != -1) {
          alert('hi');
      }
});

DEMO

^*：如果您事先在某些元素上设置selected属性并想在页面加载时运行测试，则只需触发通过在select元素上调用.change()来更改事件。

Answer 2

如果选择文件已准备好First并且用户更改选择时此代码会触发警报

$(function(){
   checkSelection();

   $('#clients').change(function(){
      checkSelection();
   })

   function checkSelection(){
       var selectedOptions = $('#clients').val();

       if($.inArray('First',selectedOptions) != -1){
           alert('hi'); 
       }
   }  
})

Answer 3

您已在html中设置选项ID而非值。此外，在jQuery中查找所选值，您只需要查找select元素的值。

请改为：

<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option> 

$(document).ready(function(){
    if($('#clients').val() == 'first'){
        alert('hi');
    }
});

如果你想让它实时显示弹出窗口，请执行以下操作：

$(document).ready(function(){
  $('#clients').change(function(){
    if($(this).val() == 'first'){
      alert('hi');
    }
  });
});

Jquery获取选择选项id

3 个答案: