javascript - 如何根据选择框显示输入并删除它？

Question

我有两个输入，我需要根据选择框显示其中之一:

html代码:

<select id="type-price">
    <option value="">Choose one...</option>
    <option value="numeric">Numeric </option>
    <option value="percentage">Percentage</option>
</select>

<div id="input_type1">
    <input type="text" name="Numeric">
</div>
<div id="input_type2">
    <input type="text" name="Percentage">
</div>

jQuery 代码:

$('#type-price').on('change',function(){
    if($(this).val()=== "numeric"){

      $("#input_type1").show();
      $("#input_type2").hide();

    }else if ($(this).val()=== "percentage"){

      $("#input_type1").hide();
      $("#input_type2").show();

    }
});

现在完全没问题了，但我的问题是，当我显示 input_type1 然后隐藏 input_type2 时，我有 php 请求，该请求拾取第二个 null 所以我需要从 Dom 树中删除隐藏的一个!

Answer 1

您可以清空包含输入的 div，这样您的 DOM 中就只有一个输入。每次更改选择时，它都会通过输入的 html 填充相关的 div。

此外，您还使用了错误的选择器，# 选择器用于 id，并且您在 HTML 代码中使用了类。

JQuery 类选择器是 ..

function removeAll() {
  $("#input_type1").html('');
  $("#input_type2").html('');
}

removeAll();

$('#type-price').on('change',function(){
  removeAll();
  if ($(this).val() === "numeric"){
    $("#input_type1").append('<input type="text" value="numeric">');
  } else if ($(this).val() === "percentage"){
    $("#input_type2").append('<input type="text" value="percentage">');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
  <option value="" disabled selected>Choose one...</option>
  <option value="numeric">Numeric </option>
  <option value="percentage">Percentage</option>
</select>

<div id="input_type1">
  <input type="text" value="numeric">
</div>
<div id="input_type2">
  <input type="text" value="percentage">
</div>