3

这里有问题。尝试根据下拉框中选择的内容显示某些字段。我已经查看了堆栈并尝试在此处编辑代码：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>
4

3 回答 3

1

没有.namejQuery。

您可以使用.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-26T03:29:39.640 回答
0

这是我想出的解决方案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-26T03:38:10.073 回答
0

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

于 2013-03-26T04:07:50.503 回答