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

【问题标题】：How to get click event on particular option of select box如何在选择框的特定选项上获取点击事件
【发布时间】：2015-07-14 20:41:55
【问题描述】：

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

<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');
     }
  });
});

请帮忙。

【问题讨论】：

jsfiddle.net/arunpjohny/eanhhwoc/3 - 有什么问题

标签： jquery jquery-selectbox

【解决方案1】：

使用 jQuery prop

$('#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>

【讨论】：

【解决方案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>

【讨论】：

第一次点击时..全部被选中..但取消选择时..再次选择全部..

【解决方案3】：

试试 -

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

DEMO

【讨论】：