如何“添加更多”可以根据选择值显示表单输入字段的选择

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>

此代码，如果我选择职位，将显示有关职位的表单输入。 我想添加“添加更多”按钮。当我点击此按钮时，选择字段将附加在下方，每个选择字段将显示特定的表单输入，直至每个选择值。

我不知道如何编码，请指导我如何感谢❤️

这是我的期望。当我按“+”时，它会在下面添加选择字段。 enter image description here

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>