javascript - jquery on selection 禁用选项并使边框红色

Question

html

<select name="register-month" id="register-month">
    <option value="00">Month</option>
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

j查询

function checkbirthday() {
     var register_month_value = $("#register-month").val();
     //month check
     if (register_month_value === "") {
         $("#register-month option[value='00']").remove();
         $('#register-month').css('border-color', 'red');
     } else {
         $('#register-month').css('border-color', '#dfe0e6');
     }
     return;
 }

 $(document).ready(function() {
     $("#register-month").keyup(checkbirthday);
 });

我的意图很简单，第一我想在他们点击选择后禁用“月份”，第二如果选择为空值，将 css 边框更改为红色。

但是我试了很多方法，还是不行，请问这里有什么问题吗？

Answer 1

查看内联评论:

// on change of the option selection
$('#register-month').on('change', function() {
    var selectedMonth = parseInt($(this).val(), 10); // Get value of selected option
    var borderColor;

    if (selectedMonth) { // If selected option is `Month`
        $(this).find('option[value="00"]').prop('disabled', true);
        borderColor = '#dfe0e6';
    } else {    
        borderColor = 'red';
    }

    $(this).css('border-color', borderColor); // Update the border colour of the dropdown.
});

演示:http://jsfiddle.net/tusharj/7w5ub8t9/