Question

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

场景：当我点击并打开一个选择选项时，应该添加“class = open”，当它在dom外部点击关闭或选择某个选项或再次点击下拉列表时，应该添加“class = close”。< / p>

我的代码：

<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/

有人可以提出答案。

提前致谢。

Answer 1

使用focusout

 $("#sKMob_orderStatus, #skMob_orderDate").focusout(function(){
     $('#sKMob_orderStatus').removeClass('open');
     $('#sKMob_orderStatus').addClass('close');
    });

或点击文档（表示下拉菜单关闭）

 $(document).on('click',function(){
    $('#sKMob_orderStatus').removeClass('open');
    $('#sKMob_orderStatus').addClass('close');
});

选择某个选项时

$("#sKMob_orderStatus, #skMob_orderDate").change(function() {
    $('#sKMob_orderStatus').removeClass('open');
        $('#sKMob_orderStatus').addClass('close');
});

选择会打开：

$("#sKMob_orderStatus, #skMob_orderDate").focus(function () {
        $('#sKMob_orderStatus').removeClass('open');
        $('#sKMob_orderStatus').addClass('close');
}

点击箭头时评论

$("#sKMob_orderStatus, #skMob_orderDate").on("mousedown",function(){
	$('#sKMob_orderStatus').addClass('open');
  $('#sKMob_orderStatus').removeClass('close');
	console.log("triggered");
});
 $("#sKMob_orderStatus").focusout(function(){
     $('#sKMob_orderStatus').removeClass('open');
     $('#sKMob_orderStatus').addClass('close');
    });
    var flag=false;
     $("#sKMob_orderStatus").on('click',function(){
     if(flag){
    $('#sKMob_orderStatus').removeClass('open');
    $('#sKMob_orderStatus').addClass('close');
    flag=false;
    }
    else
     flag=true;
});

.close{
  color:red;
}
.open{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sKMob_orderStatus">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>

Answer 2

在你的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类。

Answer 3

尝试这种棘手的替代方式

$(function(){    
    $("#sKMob_orderStatus, #skMob_orderDate").on("focus focusout change",function(e){        
        switch(e.type){            
            case 'focus' :
                $(this).addClass('open').removeClass('close');
                break;
            case 'focusout' :
            case 'change' :
                $(this).addClass('close').removeClass('open');
                break;
        }
    });
});

.open{color:green;}
.close{color:red;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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>

添加自定义类以在html中打开和关闭时选择选项

3 个答案: