Afficher une zone de texte lors de la sélection d'une couleur et de la masquer à la même heure

Question

J'ai un problème pour masquer la deuxième zone de texte lors de la sélection du premier. et vice versa. Je pense que je ne peux pas avoir le code écrit correctement.

<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

Définir vos sélections d'éléments sur le dessus et les affecter à un var, de cette façon vous n'avez pas à traverser le DOM chaque fois que vous cliquez sur l'élément pour sélectionner les autres éléments. Mettez-le dans une étiquette de script, cela vous évitera beaucoup de maux de tête.

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