HTML表单根据所选下拉列表显示字段

此处存在问题。试图根据在下拉框中选择的内容显示某些字段。我“维生素E对堆栈来看看，并尝试编辑在这里代码： http://jsfiddle.net/tarleton/p8ARq/15/ 与我的工作，我似乎无法得到它的工作...这里总新手，所以任何帮助赞赏HTML表单根据所选下拉列表显示字段

$("select").change(function() { 
    // hide all optional elements 
    $('.optional').css('display','none'); 

    $("select option:selected").each(function() { 
     if($(this).name() == "test") { 
      $('.test').css('display','block'); 
     } else if($(this).val() == "test2") { 
      $('.test2').css('display','block'); 
     } 
    }); 
});

。 HTML：

<form class="contact" name="contact" action="#" method="post"> 
     <div id="styled-select"> 
      <select> 
      <option name="test" value="Option 1" >Referral</option> 
       <option name="test2"value="Option 2">Other</option> 
       </select> 
     </div> 
      <input class="optional test" name="revealtest" style="display:none;" class="hidden-txt"> 

     <input class="optional other" name="revealtest2" value="" style="display:none;" class="hidden-txt"> 

</form>

来源

2013-03-26 Tarleton Dewé

非常感谢这一点。我知道这是懒惰的，但我正在寻找使这成为很多如果变量相当广泛的形式。任何人都知道我可以用来保存手动代码的GUI？我试过做一些搜索，但是我没有遇到过这种功能 – 2013-03-27 02:03:48

没有.name的jQuery

您可以使用.attr()

if($(this).attr('name')

和class可应用于div或其他标签。

所以指定什么如下选择，

$('input.test2').css('display','block'); 
$('input.test').css('display','block');

而且包装所有class单class属性中，也删除inline style因为jQuery您使用.hide()也做躲藏。

来源

2013-03-26 03:29:39

这是我想出了http://jsfiddle.net/burn123/p8ARq/34/

，我注意到的是，你有style="display:hide"主要事情的解决。因为这是内联样式，所以不会轻易删除。您还有一个不必要的optional类，它为元素添加了第二个display:none。所以我删除了这两个和CSS设置为

.other, .referral { 
    display:none; 
}

所以display只触发一次。大部分你的jQuery都很好。您需要将推荐设置为$(this).val()，就像您对other所做的那样。此外，如果您希望在选择其他内容时隐藏文本框，则需要结尾else。我用fadeToggle而不是css("display", "block")也给它一点点过渡。有可能是实现这一点的代码更有效的方式，但我仍然很新的jQuery的;）

希望这有助于

来源

2013-03-26 03:38:10

您可以使用jQuery使用$("your_control").hide()或$("your_control").show()隐藏所有的控制，我只需更新您的样品jsFiddle

来源

2013-03-26 04:07:50

HTML表单根据所选下拉列表显示字段

回答

相关问题