javascript - 我有 4 个下拉菜单，我想在页面加载时隐藏它们，然后只要单击添加按钮，就会出现一个下拉菜单

Question

<div style="margin: 10px 0 10px 0">
    <h3>Co-Editors</h3>
</div>
<p class="hide_editor" id="show_editor1">
    <label for="subject_primary">Co-Editor 1:</label>
    <select name='F_co_author1' id="co_author1" onchange="LoadExperts();">
       <option value=''>No Coauthor 1</option>
    </select>
</p>

<p class="hide_editor" id="show_editor2">
    <label for="subject_primary">Co-Editor 2:</label>
    <select name='F_co_author2' id="co_author2" onchange="LoadExperts();">
        <option value=''>No Coauthor 2</option>
    </select>
</p>

<p class="hide_editor" id="show_editor3">
    <label for="subject_primary">Co-Editor 3:</label>
    <select name='F_co_author3' id="co_author3" onchange="LoadExperts();">
        <option value=''>No Coauthor 3</option>
    </select>
</p>

<p class="hide_editor" id="show_editor4">
    <label for="subject_primary">Co-Editor 4:</label>
    <select name='F_co_author4' id="co_author4" onchange="LoadExperts();">
        <option value=''>No Coauthor 3</option>
    </select>
</p>

<button id='show_add_button' type="button" class="btn btn-success" style="display: block;">Add Co-Editor</button>

<script type="text/javascript" language="javascript"> // for loading the co-editors

//hide co-editors
$(".hide_editor").hide();

//show co-editor
$("#show_add_button").on("click", function () {
//$('#show_editor1').show();

// $('#show_editor2').show();
});
</script>

这里有四个下拉菜单，它们在页面加载时隐藏，但现在当我点击添加按钮时，它应该只显示第一个下拉菜单。

我再次点击添加按钮，然后应该会出现第二个下拉菜单。

Answer 1

下面的代码应该可以解决您的问题。请注意，jQuery 的返回行为与 javascript 的不同。

$("#show_add_button").on("click", function() {
   $('.hide_editor').each(index => {
    const current =$('.hide_editor')[index];
    if(current.style.display === 'none') {
        current.style.display = 'block';
        return false;
       }
   });
});