根据选择选项显示div [英] show div depending on select option

问题描述

哦，我已经尝试了100万种不同的方法，但仍然无法正常工作:如果您从选择/选项框中选择了update或final，则它应该显示其中有输入字段的div.它仅执行默认值在switch语句中显示的内容.当然，只有在做出选择后，我才希望它确定它是否显示输入字段.

Oh help, I've tried it a million different ways yet it still does not work: If you select update or final from a select/option box, it should show the div that has an input field in it. It only does what the default shows in the switch statement. Of course, it's only after a selection is made that I want it to determine whether it shows the input field or not.

在头部...

$(document).ready(function(){  
$('#needfilenum').hide();  
var optionValue = $("#needtoshow").val();  

switch (optionValue)  
{  
case 'update':  
$("#needfilenum").show();
break;  

case 'final':  
$("#needfilenum").show();  
break;  
default:  
$("#needfilenum").hide();  
break;  
    }
});
//});

'<select id="needtoshow" >  
<option id="dfaut" value="0">Select Something</option>
<option id="update" value="update">Update</option>
<option id="final" value="final">Final</option>
<option id="allergy"value="allergy">Vegan</option>  
</select>
<div id="needfilenum"  style="background:#f00;">  
<input type="text" name="wharever"   />
</div>  

我可以更改交换机的默认设置，这似乎决定了它的显示内容 也尝试过

I can change the default on the switch and that seems to dictate what it shows also tried

//  $("#needtoshow").change(function() {  

//      switch ($(this).val())

推荐答案

如果要在下拉列表更改时显示和隐藏div，则需要绑定到change事件，例如:

If you want to have the div show and hide when the drop-down changes, you need to bind to the change event, for example:

$(document).ready(function() {
  $('#needfilenum').hide();

  $('#needtoshow').bind('change', function() {
    var optionValue = $("#needtoshow").val();

    switch (optionValue)
    {
      case 'update':
      case 'final':
        $("#needfilenum").show();
        break;

      default:
        $("#needfilenum").hide();
        break;
    }
  });
});

在您的代码中，当页面首次加载时，switch语句仅运行一次.

In your code, the switch statement runs only once when the page first loads.

这篇关于根据选择选项显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！