Question

在这里遇到问题。尝试根据下拉框中选择的内容显示某些字段。我已经看过堆栈并尝试在这里编辑代码： http://jsfiddle.net/tarleton/p8ARq/15/ 和我一起工作我似乎无法让它工作......在这里总新手所以任何帮助表示赞赏。

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

Answer 1

jQuery没有.name。

您可以使用.attr()

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

和class可以应用于div或其他代码。

所以指定要选择的内容，如下所示

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

同时将所有class包含在单个class属性中，同时删除inline style，因为在jQuery中您还使用.hide()进行隐藏。

Answer 2

这是我提出的解决方案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的新手;）

希望这有帮助

Answer 3

您可以使用jQuery通过$("your_control").hide()或$("your_control").show()隐藏所有控件，我只需在jsFiddle更新您的示例

HTML表单显示字段取决于所选的下拉列表

3 个答案: