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>

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

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