ドロップダウン選択エラー

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(); 
    } 
}); 

あなたはその後、細かいオプションを選択した場合、エラーメッセージを表示するドロップダウンでオプションを選択し、GoogleのようなドロップダウンするためにCSS input_error適用されない場合は、ドロップダウンをクリックし、ドロップダウンに

Answer 1

を申し込みます

1. jQueryライブラリがありません。コードは機能しません（したがって、jQueryライブラリを追加してください）

2.Extra #があなたのコードにあります。

3. monthsの代わりに$(this)を使用してください。

そして最後に、私はあなたがこのようにしたい願っています： - （選択ボックスには、いくつかの値を持っている場合は、エラーメッセージを非表示にし、エラーのクラスフォームの選択ボックスを削除するそれ以外の場合は、あまりにも、エラーメッセージを選択ボックスと示すために、エラークラスを追加）： -

$(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>

注： - `$（これは）` +第三JSラインで `＃`を取り除くために置き換え、コードスニペットに変数が存在しない