根据选择下拉选项隐藏/显示Div
我正在开发WP主题选项面板，但这不是WP特定的。
我有两个链接选项：
选项1 =列选项2 =布局
选项一中的选择决定了选项二中显示的内容：
1 column 2 column 3 column You only have one column! col1 col2 col1 col2 col2 我有一个jQuery的工作，可以完成我需要的大部分工作：
$("#column_select").change(function() { ($(this).val() == "col1") ? $("#layout_select1").show() : $("#layout_select1").hide(); ($(this).val() == "col2") ? $("#layout_select2").show() : $("#layout_select2").hide(); ($(this).val() == "col3") ? $("#layout_select3").show() : $("#layout_select3").hide(); });
我现在面临的问题是页面加载所有div都显示。 只有在用户切换选择菜单选项后，才会隐藏它们。
如何在加载时隐藏正确的div？
更新：我有一些回复，但我可能没有正确解释。 我不希望在加载页面时隐藏所有div。 我只想在加载时隐藏正确的div。 因此，例如，如果用户选择“2列”，他会看到第二个div。 如果他明天或下个月回到选项面板加载后他仍应看到第二个div显示。 jQuery必须在加载时检测当前选择的选项并显示相应的div。
你可以在这里看到我的意思： http ： //jsfiddle.net/NickBe/RGXa7/3/
我是javascript和jQuery的新手，所以任何帮助都会非常感激。 多谢你们！
触发document.ready()上的选择更改function
$(document).ready(function(){ $("#column_select").trigger('change'); });
这将显示/隐藏适当的div
一旦DOM加载，您需要隐藏。
您可以创建一个CSS类并将其附加到所有div。 如果您希望div不可见但仍然在屏幕上占用适当的空间，则可以使用CSS的visibility：hidden属性，如果您希望它们完全不可见，则显示：none。
我相信如果您使用display：none，您现有的代码仍然有用。 DIV是隐藏的，但是一旦选择了选项，你的jquery就会显示它们。
对于要隐藏的div，将显示设置为“none”
我同意Stanley将css类分配给div作为列选项并用作 –
$("#column_select").change(function() { $('div[id^=layout_select]').hide(); $('.'+this.value).show(); });
您可以设置display：none选项作为默认值。