僅顯示兩個選擇框

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