下拉选择错误

Question

<p class="birthday_date">
            <label for="birthday">Birthday</label>
            <select id="months" class="dd">
                <option value="">Month</option>
                <option value="january">January</option>
                <option value="february">February</option>
                <option value="march">March</option>
                <option value="april">April</option>
                <option value="may">May</option>
                <option value="june">June</option>
                <option value="july">July</option>
                <option value="august">August</option>
                <option value="september">September</option>
                <option value="october">October</option>
                <option value="november">November</option>
                <option value="december">December</option>
            </select>
            <input type="text" name="dy" id="date" placeholder="Day">
            <input type="text" name="year" id="year" placeholder="Year">
            <span id="birthday_error">you can't leave this empty.</span>
</p>

#months option[value=""] {
    display: none;
}

$('#months').change(function () {
    var selectedValue = $(this).val();
    if (selectedValue == "") {
        $(this).addClass('input_error');
        $('#birthday_error').show();
    }
});

当您点击下拉菜单时，如果您选择了一个选项，那么如果不在下拉菜单中选择一个选项则很好，然后显示错误消息并将 input_error CSS 应用于下拉菜单，如谷歌注册下拉菜单

Answer 1

1. 没有 jQuery 库。所以代码不起作用。（所以添加jQuery库）

2.Extra # 在您的代码中。

3.使用$(this)代替months变量。

最后我希望你想要这样：-（如果选择框有一些价值，则隐藏错误消息并从选择框删除错误类，否则将错误类添加到选择框并显示错误消息）：-

$(document).ready(function(){ // add this if you are adding code at top of the page not in bottom
  $('#months').addClass('input_error');
  $('#birthday_error').show();
  
  $('#months').change(function () {
    var selectedValue = $(this).val();
    if (selectedValue == "") {
      $(this).addClass('input_error'); //remove # and months variable and use $(this)
      $('#birthday_error').show();
    }else{
      $(this).removeClass('input_error'); //remove class
      $('#birthday_error').hide();//hide error message
    }
  });
});

.input_error{
 border-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- add jQuery library-->
<p class="birthday_date">
<label for="birthday">Birthday</label>
<select id="months" class="dd">
    <option value="">Month</option>
    <option value="january">January</option>
    <option value="february">February</option>
    <option value="march">March</option>
    <option value="april">April</option>
    <option value="may">May</option>
    <option value="june">June</option>
    <option value="july">July</option>
    <option value="august">August</option>
    <option value="september">September</option>
    <option value="october">October</option>
    <option value="november">November</option>
    <option value="december">December</option>
</select>
<input type="text" name="dy" id="date" placeholder="Day">
<input type="text" name="year" id="year" placeholder="Year">
<span id="birthday_error">you can't leave this empty.</span>
</p>

注意：-注意代码sn-p中给出的cmets