只顯示兩個選擇框

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屬性。

這樣的 - 假設你想在最初有最後兩個SELECTS隱藏和顯示一個

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>