jquery - 如何在选择框的特定选项上获取点击事件

Question

我有一个选择下拉菜单，例如：

<select multiple="" id="search_skills" name="search_skills[]">
    <option value="all">All</option>
    <option value="1">PHP</option>
    <option value="2">JAVA</option>
    <option value="3">.NET</option>
</select>

现在，当用户首先选择“全部”时，应选择所有值。所以我想要一个点击事件。这是我正在尝试的。但它不起作用。

$(function(){ 
  $("select[name='search_skills[]']").change(function() {            
    if ( $("select[name='search_skills[]']")[0].selectedIndex === 0 ) {
        var sel_val = $("#search_skills").val();
        alert(sel_val);
        if(sel_val == 'all'){
            $("#search_skills > option").prop("selected","selected");
        }
        else if(sel_val.indexOf('all') == '-1'){
            $("#search_skills > option").removeAttr("selected");
        }
        $('#search_skills').selectpicker('refresh');
     }
  });
}); 

请帮忙。

Answer 1

使用 jQuery道具

$('#selectall').click(function() {
    $('option').prop('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="" id="search_skills" name="search_skills[]">
    <option id="selectall" value="all">All</option>
    <option value="1">PHP</option>
    <option value="2">JAVA</option>
    <option value="3">.NET</option>
</select>

Answer 2

您可以尝试使用prop()功能：

$(document).on('click', '#search_skills option[value="all"]', function() {
  var that = $(this);
  var opt = $('#search_skills > option');
  if (!that.is('selected')) {
    opt.prop('selected', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="" id="search_skills" name="search_skills[]">
    <option value="all">All</option>
    <option value="1">PHP</option>
    <option value="2">JAVA</option>
    <option value="3">.NET</option>
</select>

Answer 3

尝试 -

$('#search_skills option:first').on('click', function() {
var that = $(this);
  var opt = $('#search_skills > option');
  if (!that.is('selected')) {
    opt.prop('selected', true);
  }
})

演示