드롭 다운 선택 오류

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

당신이 다음 고급 옵션을 선택하면 다음 오류 메시지가 표시 드롭 다운에서 옵션을 선택하고 구글처럼 드롭 다운하는 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>

참고 : -