0

我正在尝试在 jquery 的帮助下添加值但最后一个值 + 在代码中一次又一次

从下拉列表中选择新值时应清除最后一个值

var lastSelected;
$(document).ready(function() {
  $("#selectchild1").on('change', function() {
    $("div").remove("select");
    var childvalue = this.value;
    alert(childvalue);


    var count = $(this).val();
    newContent = "";
    name = $(this).attr("name");
    var j = 1;
    var k = 0;
    for (var i = 0; i < count; i++) {
      newContent += $("#addedchild1").append("<div class='col-md-2 col-lg-2 text-center'><div class='form-group'>Child-" + j + " Age <select name='RoomTypes[" + k + "][]'><option value='0'>Age</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><select></div></div>");
      j++;
    }

    content.html(newContent);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectchild1" class="form-control">
  <option value="0">00</option>
  <option value="1">01</option>
  <option value="2">02</option>
  <option value="3">03</option>
  <option value="4">04</option>
  <option value="5">05</option>
  <option value="6">06</option>
</select>
<div class="col-xs-3 col-sm-3 col-md-8 text-right">
  <div id="addedchild1"></div>
</div>

4

2 回答 2

1

我想你的意思是这个

  1. newContent += $("#addedchild1").没有做你认为的那样
  2. 没有content声明
  3. .html() 如果您使用它替换 HTML，则无需删除任何内容

我认为您不想要 addedChild1 但我给 ID="wrapper" 的 div 中所有添加的子项 - 如果您想嵌套在 addedChild 中，只需将 #wrapper 更改为 #addedChild1

$(function() {
  $("#selectchild1").on('change', function() {
    var count = +$(this).val();
    name = $(this).attr("name");
    const newContent = Array.from(Array(count+1).keys()) // cleate an array from 0 to count+1
    .slice(1) // get rid of the `0` to use ${i} from `1` 
    .map(i => (`<div class='col-md-2 col-lg-2 text-center'><div class='form-group'>Child-${i} Age <select name='age'><option value='0'>Age</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><select></div></div>`))
    $("#wrapper").html(newContent.join("")); // add the array to the wrapper after joining it
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectchild1" class="form-control">
  <option value="0">00</option>
  <option value="1">01</option>
  <option value="2">02</option>
  <option value="3">03</option>
  <option value="4">04</option>
  <option value="5">05</option>
  <option value="6">06</option>
</select>
<div id="wrapper" class="col-xs-3 col-sm-3 col-md-8 text-right">

</div>

于 2020-11-23T12:34:20.030 回答
-1

首先，您的代码中存在错误。没有名为 的变量content。

未捕获的 ReferenceError：未定义内容 在此处输入图像描述

您应该将以下行添加到您的代码中。

$('#addedchild1 div').remove();

我希望我理解你的问题，我希望我能够帮助你。

在此处查看示例：https ://codepen.io/yasgo/pen/ExyqWvy

于 2020-11-23T12:30:49.090 回答