HTML选择下拉菜单，Jquery问题

Question

我整天都遇到过很多JS问题因为我是JS的新手，但我有以下HTML：

<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"><div>Content of Formksldmkjlad1</div></div>
   <div id="form2"style="display:none">Content of Form2</div>
   <div id="form3"style="display:none">Content of Form3</div>
</div>

我有一个onchange事件，如下面JS中所示：

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

我遇到了一个问题，所有div都出现在页面加载中，所以我添加了以下JS：

$( document ).ready(function() {
  $('#NewContent').children().hide();
});

我现在遇到的问题是用户必须在菜单框中单击另一个项目，然后返回到他们想要的项目。例如，下拉列表显示：

1.opt1
2.opt2
3.opt3

为了查看opt的内容，用户首先必须将下拉列表更改为opt2或opt3，然后返回opt1以查看内容。

^道歉如果这没有意义，我将努力提供问题的视觉

Answer 1

第一次显示页面时播种所有内容只需在文档中添加一些内容就可以显示第一个div。

$( document ).ready(function() { $('#NewContent').children().hide(); $('#form1').show(); });

或使用 $( document ).ready(function() { $('#NewContent > div:not(:first-child)').hide(); });

在您的初始选择器中隐藏除第一个子div之外的所有内容。然后一切都应该排好你的变化事件。

Answer 2

您可以在绑定后立即触发change事件，以便在页面加载时预先选择选择框时显示正确的内容div：

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

演示：http://jsfiddle.net/DjgA2/