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

你还有一些问题，而不是我从一开始就看到的问题。

您需要将功能移到功能
选项上没有hidden属性。

喜欢这个 - 假设你想最初隐藏最后两个SELECTS并逐个显示下两个SELECT

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>

Answer 2

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

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

var maxAppend = 3;

function addChooseSub() {
    maxAppend++;

    if (maxAppend > 5) return;

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

仅显示两个选择框

2 个答案: