Question

点击+按钮后，我可以添加更多选择元素。我还想在单击-按钮时删除它们。如果我单击-一次，它应该删除一个选择元素。我该怎么做

$(function() {
  var p = 2500;
  $('#add').click(function() {
     $("div").append(' Adult: <select><option>1</option><option selected="selected">2</option><option>3</option></select>');
    $("div").append(' Child: <select><option>0</option><option selected="selected">1</option><option>2</option></select><br>');
    value = $("#rooms").val();
    price = $("#price").val();
    priceInt = parseInt(price);
    value++;
    price = priceInt + p;
    $("#rooms").val(value);
    $('#price').val(price);
    if (value > 0) {
      $('#selectAdult, #selectChild').prop('disabled', false);
    }
  });
  $('#minus').click(function() {
    value = $("#rooms").val();
    if (value > 0) {
      price = $("#price").val();
      priceInt = parseInt(price);
      value--;
      price = priceInt - p;
      $("#rooms").val(value);
      $('#price').val(price);
    }
    if (value == 0) {
      $('#selectAdult, #selectChild').prop('disabled', 'disabled');
    }
  });
  var adult = $("#selectAdult option:selected").text();
  adultInt = parseInt(adult);
  price = $("#price").val();
  priceInt = parseInt(price);
  if(adultInt == 3){
    price = priceInt + 400;
  }
  $('#price').val(price);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <input type = "button" id="minus" value="-">
    <input type="text" id="rooms" value="1" readonly="readonly">
    <input type = "button" id="add" value="+">
    Total: <input type="text" id="price" value="2500" readonly="readonly">
    <div>Adult: <select id="selectAdult">
      <option>1</option>
      <option selected="selected">2</option>
      <option>3</option>
    </select>
    Child: <select id="selectChild">
      <option>0</option>
      <option selected="selected">1</option>
      <option>2</option>
      </select><br></div>
  </body>
</html>

此外，如果选择的成人是3，我想在总数中添加400.我已经编写了代码，但我猜这不是怎么做的，因为它不起作用。

Answer 1

我在添加功能中更改了你append并用<span>包裹它（你应该使用类），在减去函数中我删除了span last-child

＆＃13;

$(function() {
  var p = 2500;
  $('#add').click(function() {
     $("div").append('<span> Adult: <select><option>1</option><option selected="selected">2</option><option>3</option></select> Child: <select><option>0</option><option selected="selected">1</option><option>2</option></select><br></span>');
    
    value = $("#rooms").val();
    price = $("#price").val();
    priceInt = parseInt(price);
    value++;
    price = priceInt + p;
    $("#rooms").val(value);
    $('#price').val(price);
    if (value > 0) {
      $('#selectAdult, #selectChild').prop('disabled', false);
    }
  });
  $('#minus').click(function() {
    value = $("#rooms").val();
    if (value > 0) {
      price = $("#price").val();
      priceInt = parseInt(price);
      value--;
      price = priceInt - p;
      $("#rooms").val(value);
      $('#price').val(price);
      $("div span:last-child").remove();
    }
    if (value == 0) {
      $('#selectAdult, #selectChild').prop('disabled', 'disabled');
    }
  });
  var adult = $("#selectAdult option:selected").text();
  adultInt = parseInt(adult);
  price = $("#price").val();
  priceInt = parseInt(price);
  if(adultInt == 3){
    price = priceInt + 400;
  }
  $('#price').val(price);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <input type = "button" id="minus" value="-">
    <input type="text" id="rooms" value="1" readonly="readonly">
    <input type = "button" id="add" value="+">
    Total: <input type="text" id="price" value="2500" readonly="readonly">
    <div>Adult: <select id="selectAdult">
      <option>1</option>
      <option selected="selected">2</option>
      <option>3</option>
    </select>
    Child: <select id="selectChild">
      <option>0</option>


      <option selected="selected">1</option>
      <option>2</option>
      </select><br></div>
  </body>

＆＃13;

Answer 2

你可以尝试

if (value == 0) {
  $('#selectAdult, #selectChild').hide();
}

单击时删除选择框

2 个答案: