下拉選項,一個小判斷

暮夜秋雨發表於2024-03-07

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>

相關文章