选择一种颜色时显示文本框并同时隐藏其他颜色

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

在顶部定义你的元素 selections 并将它们分配给一个 var，这样你就不必每次点击元素时都遍历 DOM 到 select 其他元素。

放在脚本标签里，省去很多麻烦。

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

选择一种颜色时显示文本框并同时隐藏其他颜色

Show a text-box when selecting one color and hide other same time

jquery

html-select

show-hide