下拉选项,一个小判断

html
使用js 要添加jquery.min.js引用
'''

点击查看代码
               <div class="col-md-4 mb-3">
                    <label for="validationWhether">是否漏檢</label>
                    <select class="custom-select" id="validationWhether" name="whether" required>
                        <option selected value="N">N</option>
                        <option  value="Y">Y</option> 
                    </select>
                </div>

判断选中的值,改变背景颜色和字体颜色

点击查看代码
<script>
    var selectElement = document.getElementById("validationWhether");

    // 监听select元素的change事件
    selectElement.addEventListener("change", function() {
    // 判断选中的值是否为"Y"
    if (this.value === "Y") {
        // 设置字体颜色为红色
        this.style.color = "red";
        this.style.fontWeight = "bold";
        this.style.backgroundColor = "lightpink";
    } else {
        // 设置字体颜色为默认值
        this.style.color = "";
        this.style.fontWeight = "normal";
        this.style.backgroundColor = "";
    }
    });
</script>

判断select选中的值,根据条件改变背景颜色和字体颜色

点击查看代码
<script>
    if ($("#validationWhether").val() == "Y") 
    {
        $(".custom-select").css({
            "color": "red",
            "font-weight": "bold",
            "background-color": "lightpink"
        });
    }
</script>
posted @   暮夜秋雨  阅读(7)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示