Javascript Jquery下拉列表动态表单问题

大家好，我有以下下拉列表：

<div id='drop'>
    <select name='option'>
        <option value="Opt1">Opt1</option>
        <option value="Opt2">Opt2</option>
        <option value="Opt3">Opt3</option>
    </select>
</div>

<div id = 'NewContent'>
   //I need different content here depending on selection
   <div id="form1" style="display:none">Content of Form1</div>
   <div id="form2"style="display:none">Content of Form2</div>
   <div id="form3"style="display:none">Content of Form3</div>
</div>

当用户更改下拉列表时，这将起作用并显示：表单1、2等的内容

然而，问题是，如果我只是简单地将一个div更改为包含另一个div，屏幕上不会显示任何内容，例如：

  <div id = 'NewContent'>
       //I need different content here depending on selection
       <div id="form1" style="display:none"><div>Content of Form1</div></div> //this won't show  anything 
       <div id="form2"style="display:none">Content of Form2</div>
       <div id="form3"style="display:none">Content of Form3</div>
    </div>

//我需要在这里根据选择不同的内容
Form1//的内容不会显示任何内容
表格2的内容
表格3的内容

---

有没有办法绕过这个问题？？？

只隐藏子代，而不是所有子代（

*

）。通过使用

find（'*'）.hide（）

可以隐藏所有子体，因此，当您显示其中一个div时，它将被显示，但它的子项仍然隐藏

$('#NewContent').children().hide();

错误是您的html。。 在html中，每当下拉列表中有任何更改时，“$（this）.val（）”将始终返回“Opt1”、“Opt2”或“Opt3”，并且在html中没有任何带有“Opt1”、“Opt2”或“Opt3”的id。 那么，试试这个：

<div id='drop'>
    <select name='option'>
        <option value="form1">Opt1</option>
        <option value="form2">Opt2</option>
        <option value="form3">Opt3</option>
   </select>
</div>

<div id = 'NewContent'>
//I need different content here depending on selection
   <div id="form1" style="display:none">Content of Form1</div>
   <div id="form2"style="display:none" >Content of Form2</div>
   <div id="form3"style="display:none">Content of Form3</div>
</div>

$('select[name="option"]').change(function() {
   $('#NewContent').children().hide();
   $('#'+$(this).val()).show();
});

Opt1
Opt2
Opt3
//我需要在这里根据选择不同的内容
表格1的内容
表格2的内容
表格3的内容
$（'select[name=“option”]”）。更改（函数（）{
$（'#NewContent'）.children（）.hide（）；
$（'#'+$（this.val（））.show（）；
});

Legend-非常感谢你，我已经被困在这个问题上很久了！但是，当页面第一次加载时，所有div同时出现在屏幕上。这是怎么可能的，您是否在所有div中添加了“style='display:none'”？好的，如果这是您想要的，请检查此plnkr。。

<div id='drop'>
    <select name='option'>
        <option value="form1">Opt1</option>
        <option value="form2">Opt2</option>
        <option value="form3">Opt3</option>
   </select>
</div>

<div id = 'NewContent'>
//I need different content here depending on selection
   <div id="form1" style="display:none">Content of Form1</div>
   <div id="form2"style="display:none" >Content of Form2</div>
   <div id="form3"style="display:none">Content of Form3</div>
</div>

$('select[name="option"]').change(function() {
   $('#NewContent').children().hide();
   $('#'+$(this).val()).show();
});