我有4个下拉菜单,我想在页面加载时将其隐藏,然后每当单击添加按钮时,都应该出现一个下拉菜单

时间:2018-09-24 13:37:54

标签: javascript php jquery html

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

这四个下拉菜单在页面加载时被隐藏,但是现在当我单击添加按钮时,它应该仅显示第一个下拉菜单。

同样,我点击添加按钮,然后第二个下拉列表应该出现。

2 个答案:

答案 0 :(得分: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;
       }
   });
});

答案 1 :(得分:0)

当您使用jQuery时,它会为实现该目标提供更好的方法。 更干净,更容易理解。

@given("a precondition")
def given_implementation(context)
    pass

@when("step 1")
def when_implementation(context)
    pass

#which annotation to use for and??
def and_implementation(context)
    pass

@then("step 3")
def then_implementation(context):
    pass