根据下拉菜单默认隐藏元素

Question

我有一个表单元素，它的隐藏或显示取决于表单中的下拉元素。我已经能够在下拉列表更改时更改可见性。

这是我现在的代码：

$("select[name=post_category]").change(function(){
var id = $("select[name=post_category]").val();
if(id != 3){
    $("dt#post_url-label").hide();
    $("dd#post_url-element").hide();
}
else{
    $("dt#post_url-label").show();
    $("dd#post_url-element").show();
}
});

我想要的是隐藏字段，除非页面加载 id=3 （所以我不能只用 CSS 隐藏它们），在这种情况下，字段必须从一开始就可见。现在，该字段在页面加载时始终可见。

有什么建议我应该如何去做吗？

Answer 1

试试这个：

$('select[name="post_category"]').change(function() {
    $('dt#post_url-label, dd#post_url-element').toggle( +this.value === 3 );
}).change();

想法是立即触发更改事件。您应该能够通过使用 triggerHandler('change') 或仅 change() 来实现这一点。

现场演示1： http://jsfiddle.net/XE78E/
现场演示2： http://jsfiddle.net/XE78E/1/

2. 演示显示，如果预选第三个选项，则该元素可见。

Answer 2

那么为什么你不检查页面加载是否 id = 3 并使用相同的逻辑来隐藏或显示元素。

Answer 3

该代码是 javascript，对吧？
在页面加载时调用 $("select[name=post_category]").change() 。

window.onload = function() { $("select[name=post_category]").change() }

或将其添加到现有的 onload 函数中。