Question

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

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

然后我有以下Javascript：

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

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

然而 - 问题是，如果我只是简单地改变其中一个div来包含另一个 - 屏幕上没有显示任何内容，EG。：

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

有没有办法解决这个问题？

Answer 1

只隐藏孩子，而不是所有后代（*）。通过使用find('*').hide()，您隐藏了所有后代，因此当您显示其中一个div时，它将会显示，但它的子项仍然是隐藏的。

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

Answer 2

错误是你的HTML .. 在您的HTML中，只要下拉列表中有任何更改＆＃34; $（this）.val（）＆＃34;将始终返回＆＃34; Opt1＆＃34;，＆＃34; Opt2＆＃34;或＆＃34; Opt3＆＃34;并且在你的HTML中没有任何id＆＃34; Opt1＆＃34;，＆＃34; Opt2＆＃34;或＆＃34; Opt3＆＃34;。所以，试试这个：

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

Jquery Dropdown动态表单问题

2 个答案: