如何将自定义类添加到选择选项元素。

场景:当我单击并打开一个选择选项时,应添加“ class = open”,当它在dom外部单击或选择某个选项或再次单击该下拉菜单时,应添加“ class = close”。

我的代码:

<select id="sKMob_orderStatus">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
<select id="skMob_orderDate">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
$("#sKMob_orderStatus, #skMob_orderDate").on("mousedown",function(){
    $('#sKMob_orderStatus').addClass('open');
    console.log("triggered");
});


参考样本:http://jsfiddle.net/T4yUm/298/

任何人都可以提出答案。

提前致谢。

最佳答案

像这样在您的jquery代码中添加另一个函数:

 $("#sKMob_orderStatus, #skMob_orderDate").on("mousedown",function(){
  if($("#sKMob_orderStatus").hasClass('open'))
  {
    $('#sKMob_orderStatus').removeClass('open');
      $('#sKMob_orderStatus').addClass('close');
  }
  else{
    $('#sKMob_orderStatus').removeClass('close');
    $('#sKMob_orderStatus').addClass('open');
  }

    console.log("triggered");
});
$(document).click(function(event) {
    if (!$(event.target).is("#sKMob_orderStatus, #skMob_orderDate")) {
        $('#sKMob_orderStatus').removeClass('open');
        $('#sKMob_orderStatus').addClass('close');
                console.log("triggered back");
    }
});

$("#sKMob_orderStatus, #skMob_orderDate").on("change" ,function(event) {
    $('#sKMob_orderStatus').removeClass('open');
    $('#sKMob_orderStatus').addClass('close');
    console.log("triggered back");
});


第二个函数将检查是否在元素外部单击,它将删除open类并添加close类。

07-24 09:50
查看更多