根據除第一個選項選擇外的所有選項更改CSS

Question

嘗試根據所選選項添加CSS類。 第一個選項將始終在頁面加載時被選擇，標簽不應顯示。 僅在選擇其他選項時，標簽應顯示

 $('#reason option').each(function() { if ($(this).is(':selected')) { $('.return-select label').addClass("form-select-dropdown"); } else if ($('.return-select option:first').prop('selected', true)) { $('.return-select label').removeClass("form-select-dropdown"); } }); 

 .form-select-dropdown { opacity: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="form-row return-select"> <label class="show-default" for="reason">one</label> <select id="reason" name="reason" class="required"> <option class="testing" value="">Default</option> <option value="Three">three</option> <option value="Four">Four</option> <option value="Five">Five</option> </select> </div> 

Answer 1

像這樣的事情應該做的工作：

$("#reason").change(function(event) {
    //get the selected option when the select changes its value
    var selected = $(this).find('option:selected');
    //if there is a value attribute on the selected option, then set the class
    if(selected.val()) {
        $('.return-select label').addClass("form-select-dropdown");
    } else {
        $('.return-select label').removeClass("form-select-dropdown");
    }
});

或像我們的朋友這樣說：

$("#reason").change(function(event) {   
    if(event.target.value) {
        $('.return-select label').addClass("form-select-dropdown");
    } else {
        $('.return-select label').removeClass("form-select-dropdown");
    }
});