javascript - 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 的内容。

$(文档).ready(函数(){ $('#NewContent').children().hide(); $('#form1').show(); });

或使用 $(文档).ready(函数(){ $('#NewContent > div:not(:first-child)').hide(); });

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