如何通过选择来显示/隐藏div（jQuery）

Question

我的代码：

<select id="select">
<option id="1" value="thai language">option one</option>
<option id="2" value="eng language">option two</option>
<option id="3" value="other language">option three</option>
</select>

<div id="form1">content here</div>
<div id="form2">content here</div>
<div id="form3">content here</div>

我想要的是，当选择选项1时显示div #form1并隐藏form2和form3，或者选择选项2时显示div #form2并隐藏form1和form3。

- vee

Answer 1

$('#select').change(function() {
   $('#form1, #form2, #form3').hide();
   $('#form' + $(this).find('option:selected').attr('id')).show();
});

请注意，ID不应以数字开头，但上述代码可以工作。

- Paolo Bergantino

---

沿着我想的方向。$(this).attr('id') 不会引用选择本身的ID吗？我在想我需要获取选择索引，获取该选项，然后获取ID。 - Sampson

仅仅是为了补充上面的评论，给“content here” div添加一个类，比如说“contentBox”，然后使用$('.contentBox').hide()，这样就不用列举所有单独的div了。 - Nooshu

实际上，.contentBox必须获取文档中的*所有元素并查看它们是否具有该类，根据文档的不同，三个ID查询可能更快。但是，如果表单数量增加，div.contentBox可能是最好的选择，但对于这种情况，我认为将其保持原样并不一定是坏事，尽管我考虑建议使用公共类。 - Paolo Bergantino

你为什么不直接使用 .val() 呢？ - jcuenod

好的，我忘记添加了 $(document).ready(function(){ // 在这里编写你的代码 });:-P非常感谢。 - vee

Answer 2

如果您的表单很大，可以像这样将它们放在单独的文件中：

$(document).ready(function() {
     $('#select').change(function() {
         $("#myform").load(this.value);
     });
 });


<select id="select">
<option value="blank.htm">Select A Form</option>
<option value="test1.htm">option one</option>
<option value="test2.htm">option two</option>
<option value="test3.htm">option three</option>
</select>

<div id="myform" ></div>

- Tony Borf

Answer 3

更好的版本：

$('#select').change(function() {
   $('div').not('#form' + $(this).find('option:selected').attr('id')).hide();
   $('#form' + $(this).find('option:selected').attr('id')).show();
});

- Vladimir

Answer 4

类似于这样？

var optionValue = $("#select").val();

$('#form1, #form2, #form3').hide();

switch(optionValue)
{
case 1:
  $("#form1").show();
  break;
case 2:
  $("#form2").show();
  break;
case: 3:
  $("#form3").show();
  break;
}

- Tom

Answer 5

只隐藏先前显示的div不是更好吗？

var selection = 0;
$('#select').change(function() {
  $('#form' + selection).hide();
  selection = $(this).val();
  $('#form' + selection).show();
});

请注意，ID不应以数字开头，但上述代码可以实现此功能。

- jcuenod