只显示两个复选框

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

Answer 2

你的问题比我从一开始就看到的要多。

• 您需要将计数器移到函数之外。
• 选项中没有hidden属性。

就像这样--假设你最初想要隐藏最后两个选择，然后一个一个地显示下两个选择。

​

var maxAppend = 3;
$(function() {
  $(".addSelect").on("click", function(e) {
    maxAppend++;
    if (maxAppend <= $("select.signUp").length) {
      $("select.signUp[name=\"option" + maxAppend + "\"]").show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="signup box">

  <hr>
  <form method="POST" action="#" class="chooseCourse">
    <select class="signUp" name="option1">
      <option value="empty" disabled selected>Course Option 1</option>
    </select>
    <br>
    <select class="signUp" name="option2">
      <option value="empty" disabled selected>Course Option 2</option>
    </select>
    <br>
    <select class="signUp" name="option3">
      <option value="empty" disabled selected>Course Option 3</option>
    </select>
    <br>
    <select class="signUp" name="option4" style="display: none;">
      <option value="empty" disabled selected>Course Option 4</option>
    </select>
    <br>
    <select class="signUp" name="option5" style="display: none;">
      <option value="empty" disabled selected>Course Option 5</option>
    </select>
    <br>
    <div class="addSelect">+</div>
    <input type="submit" name="signupSubmit" class="purple btn signup" value="Finish" style="margin-top: 0;" />
  </form>
</div>

​