Показать текстовое поле при выборе одного цвета и скрыть другое время

Question

У меня возникла проблема с отображением второго текстового поля при выборе первого. и наоборот. Я думаю, что я не могу правильно писать код.

<select id = 'color2' name = 'dept' onchange = " 

      if ($('#color2').val() == 'others') 
        { 
         $('#color_a').show(); 
         $('#color_b').hide(); 
        } 

      else($('#color2').val() == 'blue') 
        { 
         $('#color_b').show(); 

         $('color_a').hide(); 
        } 

        "> 


    <option value="">Select a Field</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
</select> 

Answer 1

Определите свой выбор элементов на верхней и назначить их вар, таким образом Вы не должны пересекать DOM каждый раз, когда вы щелкаете на элемент, чтобы выбрать другие элементы.

Поместите его в тег скрипта, он сэкономит много головных болей.

(function($){ 
 
$(function(){ 
 
    var select = $('#color2'), 
 
     colorA = $('#color_a'), 
 
     colorB = $('#color_b'); 
 
    
 
    // hide all colors 
 
    $('.color').hide(); 
 
    
 
    select.on('change', function(){ 
 
    $('.color').hide(); 
 
     
 
    if (select.val() == 'others'){ 
 
     colorA.show(); 
 
    } 
 
    else if (select.val() == 'blue') { 
 
     colorB.show(); 
 
    } 
 
     
 
    }); 
 
    
 
}) 
 
})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="color2" name='dept'> 
 
    <option value="">Select a Field</option> 
 
    <option value="blue">BLUE</option> 
 
    <option value="others">others</option> 
 
</select> 
 

 
<div id="color_a" class="color">Color A (others)</div> 
 
<div id="color_b" class="color">Color B (blue)</div>