如何通过select显示/隐藏div。（jquery）

我的代码：

<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+form2

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

请注意，ID不应该以数字开头，但上面的代码应该这样做。

类似这样的代码

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;
}

---

只隐藏之前显示的div不是更好吗？ 所以,

---

请注意，ID不应该以数字开头，但上面的代码应该这样做。

如果您的表单很大，您可以将它们放在单独的文件中，如下所示：

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

$（文档）.ready（函数（）{
$（'#select'）。更改（函数（）{
$（“#myform”）.load（此.value）；
});
});
选择一个表单
选择一
选择二
选择三

更好的版本：

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

---

按照我的想法$（this）.attr（'id'）不会引用select自身的id？我在想，我必须获取选择索引，获取该选项，然后获取id。只需添加到上面的注释中，向“contentBox”的“content here”div添加一个类，然后添加$（“.contentBox”）.hide（），保存列出所有单独div的列表。Nooshu，没错，但我不认为Paolo对提供更好的标记感兴趣，只对提问者要求的具有给定标记的解决方案感兴趣。实际上，.contentBox必须获取文档中的所有元素，并查看它们是否具有类，根据文档的不同，三次ID查找实际上可能会更快。然而，如果表单的数量增加，div.contentBox可能是最好的，但是对于这种情况，我并不认为保持它的现状一定不好，尽管我确实考虑过建议使用一个公共类。好的。我忘了添加$（document.ready（function（）{//Your code here}）；：-P非常感谢。

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