原生select,鼠标悬浮在option,改变鼠标的样式

毕设货栈 其他问答 1

有这么一个下拉选择框,我把第二项做了动态禁止,但是我想实现:鼠标悬浮在禁止的那项option,改变鼠标的样式,我加了行内样式,不管用。

<select v-model="selectType1" class="W87_b584_840ecf7 form-control" >
                <option value="ID"></option>
                <option value="PASSPORT" :disabled="userRights ==='HKID'"></option>
    </select>

回复

共1条回复 我来回复
  • 源码工厂
    这个人很懒,什么都没有留下~
    评论

    系统生成的下拉option,无法更改。可以用第三方的控件来模拟select,这样可以控制,比如select2。简单示例如下。不过题主用到了vue,需要注意添加

    <link href="http://select2.github.io/select2/select2-3.5.3/select2.css" type="text/css" rel="stylesheet" />
    <style>
        /*重写不允许选择的模拟容器curor样式*/
        .select2-disabled div{cursor:not-allowed!important}
    </style>
    <select v-model="selectType1" class="E29_6fa3_a3b659e form-control" id="sel">
        <option value="PASSPORT" disabled>1111</option>
        <option value="2222">2222</option>
        <option value="3334">3334</option>
    </select>
    <script src="http://select2.github.io/select2/js/jquery-1.7.1.min.js"></script>
    <script src="http://select2.github.io/select2/select2-3.5.3/select2.js"></script>
    <script>
        $("select").on('select2-selecting', (e) => {
            alert(e.val);//要用到this.selectType1=e.value更新model
        }).select2();
    </script>
    
    0条评论

发表回复

登录后才能评论