如何“添加更多”可以基於選擇值顯示表單輸入字段的選擇

Question

我有代碼顯示“表單輸入字段”，這些代碼將基於“選擇”值顯示。

HTML：

<select class="form-control input-sm" name="filter_option" id="filter_option">
  <option disabled="" selected="">Select a filter</option>
  <option value="1">Position</option>
  <option value="2">Salary</option>
  <option value="3">Age</option>
  <option value="4">gender</option>
  <option value="5">nationality</option>
  <option value="6">status</option>
</select>

<!-- POSITION -->
<div id="position_value">

  <select class="form-control input-sm" style="margin-top:0px;" name="operator_position">
    <option value="1">Position</option>
    <option value="2">ไม่ใช่ตำแหน่ง (isn't)</option>
    <option value="3">ตำแหน่งที่มี (contains)</option>
    <option value="4">ตำแหน่งที่ไม่มี (isn't contains)</option>
  </select>
  <input class="form-control" id="inputdefault" type="text" placeholder="Position" name="filter_position">
</div>

<!-- SALARY -->
<div id="salary_value">
  <select class="form-control input-sm" style="margin-top:0px" id="salary_oprator" name="operator_salary">
    <option value="1">=</option>
    <option value="2">มากกว่าเท่ากับ (>=)</option>
    <option value="3">น้อยกว่าเท่ากับ (<=)</option>
    <option value="4">มากกว่า (>)</option>
    <option value="5">น้อยกว่า (<)</option>
    <option value="6">ระหว่าง (Between)</option>
  </select>
  <input class="form-control" id="inputdefault" type="text" placeholder="Salary" name="filter_salary">
</div>

腳本：

<script type="text/javascript">

$("[id='filter_option']").change(function()
{
    if($(this).val() == "1"){
        $("[id='position_value']").show();
    } else {
        $("[id='position_value']").hide();
    }
    if($(this).val() == "2"){
        $("[id='salary_value']").show();
    } else {
        $("[id='salary_value']").hide();
    }
});

$("[id='position_value']").hide();
$("[id='salary_value']").hide();

</script>

此代碼，如果我選擇Position，則將顯示有關Position的表單輸入。 我想添加“添加更多”按鈕。 當我按下此按鈕時，選擇字段將附加在下方，並且每個選擇字段將顯示特定於每個選擇值的表單輸入。

我不知道如何編碼，請引導我如何謝謝❤️

這是我的期望。 當我按“ +”時，它將在下面添加選擇字段。 在此處輸入圖片說明

Answer 1

<script type="text/javascript">

$("#filter_option").change(function() {

    if($(this).val() == "1"){
        $("#position_value").show();
    } else {
        $("#position_value").hide();
    }
    if($(this).val() == "2"){
        $("#salary_value").show();
    } else {
        $("#salary_value").hide();
    }
});

$("#position_value").hide();
$("#salary_value").hide();

</script>

請嘗試這個，希望您能解決這個問題

Answer 2

這是粗略的，但是它應該使您知道該怎么做。

我只是克隆了原始元素，並將它們放在表單的底部。

 $("#filter_option").change(function() { let val = $("#filter_option").val(); //get the input from the select if (val == 1) { $("#container .position_value").each(function() { $(this).show()}); } else { $("#container .position_value").each(function() { $(this).hide()}); } if (val == 2) { $("#container .salary_value").each(function(){ $(this).show()}); } //add more for other options else { $("#container .salary_value").each(function(){ $(this).hide()}); } }); $("#add").click(function() { //when user clicks add let elem; let val = $("#filter_option").val(); //get the input from the select if (val == 1) { elem = $("#boxes .position_value").clone(); //create a clone of the element } else if (val == 2) { elem = $("#boxes .salary_value").clone(); } //add more for other options else { return; } $("#container").append(elem); //add the new element to the bottom elem.show(); //show it }); $(".position_value").hide(); $(".salary_value").hide(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="form-control input-sm" name="filter_option" id="filter_option"> <option disabled="" selected="">Select a filter</option> <option value="1">Position</option> <option value="2">Salary</option> <option value="3">Age</option> <option value="4">gender</option> <option value="5">nationality</option> <option value="6">status</option> </select><button id="add">ADD</button> <div id="container"> </div> <div id="boxes"> <!-- POSITION --> <div class="position_value"> <select class="form-control input-sm" style="margin-top:0px;" name="operator_position"> <option value="1">Position</option> <option value="2">ไม่ใช่ตำแหน่ง (isn't)</option> <option value="3">ตำแหน่งที่มี (contains)</option> <option value="4">ตำแหน่งที่ไม่มี (isn't contains)</option> </select> <input class="form-control" id="inputdefault" type="text" placeholder="Position" name="filter_position"> </div> <!-- SALARY --> <div class="salary_value"> <select class="form-control input-sm" style="margin-top:0px" id="salary_oprator" name="operator_salary"> <option value="1">=</option> <option value="2">มากกว่าเท่ากับ (>=)</option> <option value="3">น้อยกว่าเท่ากับ ( <=) </option> <option value="4">มากกว่า (>)</option> <option value="5">น้อยกว่า ( <) </option> <option value="6">ระหว่าง (Between)</option> </select> <input class="form-control" id="inputdefault" type="text" placeholder="Salary" name="filter_salary"> </div> </div>