select下拉框启用和禁止

最新推荐文章于 2024-03-07 10:32:57 发布

圆野

最新推荐文章于 2024-03-07 10:32:57 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端非框架常用

本文链接：https://blog.youkuaiyun.com/weixin_41716259/article/details/83783648

前端非框架常用专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用JavaScript监听HTML下拉框变化的例子，当选择“类似”选项时，另一个下拉框将被禁用并改变背景色；若选择“精确”，则解除禁用并恢复背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述：通过你好来判断hello是否启用和禁止

html:

<li>
    <span class="xin">*</span><label>你好</label>
    <select id="dimAcc">
        <option >类似</option>
        <option >精确</option>
    </select>
</li>

<li>
    <span></span><label>hello</label>
    <select class="openClose" disabled="disabled">
        <option value="1">hello_one</option>
        <option value="1">hello_two</option>
        <option value="1">hello_three</option>
        <option value="1">hello_four</option>
    </select>
</li>

js:

$("#dimAcc").on("change",function () {
    var Accopt = $("#dimAcc option:selected").text();
    // console.log(Accopt)
    if( Accopt === "类似"){
        $(".openClose").attr("disabled","disabled").css("background","#eee");
        // console.log(1 +"类似")
    }
    if(Accopt === "精确"){
        $(".openClose").removeAttr("disabled").css("background","#fff");
        // console.log(2 + "精确")
    }
})