javascript - 仅显示两个选择框

Question

基本上，我想要这样，每次有人单击该按钮时，它都会显示一个选择框，然后他们再次单击它，就会显示另一个选择框。所以我的问题是如何才能做到单击时一次显示一个选择框？

选择框添加功能:

function addChooseSub() {
    window["maxAppend"] = 3;
    maxAppend = maxAppend + 1;
    $("select.signUp[name=\"option" + maxAppend +"\"]").show();
    console.log("sdasd"+maxAppend)          
}

点击功能:

<script>
$('body').on('click', '.addSelect', function() {
    addChooseSub()
});
</script>

框 HTML:

<div class="signup box">
        Hello, <strong><?php echo $session->getSessionInfo("register", "firstName")." ".$session->getSessionInfo("register", "lastName"); ?></strong> and welcome to <strong>LetsChat</strong>, please choose up to <strong>5 courses</strong> you're currently taking.
        <hr>
        <form method="POST" action="#" class="chooseCourse">
            <select class="signUp" name="option1">
                    <option value="empty" disabled selected hidden>Course Option 1</option>
                    <?php $core->pullCourses(); ?>
            </select>
            <select class="signUp" name="option2">
                    <option value="empty" disabled selected hidden>Course Option 2</option>
                    <?php $core->pullCourses(); ?>
            </select>
            <select class="signUp" name="option3">
                    <option value="empty" disabled selected hidden>Course Option 3</option>
                    <?php $core->pullCourses(); ?>
            </select>
            <select class="signUp" name="option4" style="display: none;">
                    <option value="empty" disabled selected hidden>Course Option 4</option>
                    <?php $core->pullCourses(); ?>  
            </select>
            <select class="signUp" name="option5" style="display: none;">
                    <option value="empty" disabled selected hidden>Course Option 5</option>
                    <?php $core->pullCourses(); ?>  
            </select>
            <div class="addSelect"> + </div>
            <input type="submit" name="signupSubmit" onclick="choosingSubjects()" class="purple btn signup" value="Finish" style="margin-top: 0;">
        </form>
    </div>

Answer 1

发生的事情是函数顶部的 window.maxAppend = 3; 每次调用函数时都会重置它。

有几种方法可以实现您想要的效果，但最简单的是将 maxAppend 移到函数之外。这样，它就不会被重置，并且它的值将保留上次调用时的值。

var maxAppend = 3;

function addChooseSub() {
    maxAppend++;

    if (maxAppend > 5) return;

    $("select.signUp[name=\"option" + maxAppend +"\"]").show();
    console.log("sdasd"+maxAppend)          
}