1つの色を選択するときにテキストボックスを表示し、同じ時間を非表示にする

Question

最初のテキストボックスを選択するときに2番目のテキストボックスを非表示にする問題があります。逆も同様です。私はコードが正しく書かれていないかもしれないと思う。

<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

は一番上にあなたの要素の選択を定義し、VAR、あなたが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>