Ein Textfeld anzeigen, wenn eine Farbe ausgewählt und gleichzeitig ausgeblendet wird

Question

Ich habe ein Problem damit, dass die zweite Textbox ausgeblendet wird, wenn die erste ausgewählt wird. und umgekehrt. Ich denke, ich kann den Code nicht korrekt geschrieben haben.

<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

Definieren Sie Ihre Elementauswahl auf und ordnen sie eine var, dass, wie Sie das DOM nicht jedes Mal, wenn Sie auf dem Element klicken durchlaufen müssen, um die anderen Elemente auszuwählen.

Setzen Sie es in ein Skript-Tag, es wird eine Menge Kopfschmerzen speichern.

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