I am trying to add values with the help of jquery But last value + in code again and again
The last value should be cleared when select new value from dropdown
JavaScript
x
21
21
1
var lastSelected;
2
$(document).ready(function() {
3
$("#selectchild1").on('change', function() {
4
$("div").remove("select");
5
var childvalue = this.value;
6
alert(childvalue);
7
8
9
var count = $(this).val();
10
newContent = "";
11
name = $(this).attr("name");
12
var j = 1;
13
var k = 0;
14
for (var i = 0; i < count; i++) {
15
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>");
16
j++;
17
}
18
19
content.html(newContent);
20
});
21
});
JavaScript
1
13
13
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<select id="selectchild1" class="form-control">
3
<option value="0">00</option>
4
<option value="1">01</option>
5
<option value="2">02</option>
6
<option value="3">03</option>
7
<option value="4">04</option>
8
<option value="5">05</option>
9
<option value="6">06</option>
10
</select>
11
<div class="col-xs-3 col-sm-3 col-md-8 text-right">
12
<div id="addedchild1"></div>
13
</div>
Advertisement
Answer
I think you mean this
newContent += $("#addedchild1").
is not doing what you think it is- There is no
content
declared - You do not need to remove anything if you use
.html()
it replaces the HTML
I think you do not want addedChild1 but all the added children in the div I gave ID=”wrapper” – if you want to nest in a addedChild, just change #wrapper to #addedChild1
JavaScript
1
10
10
1
$(function() {
2
$("#selectchild1").on('change', function() {
3
var count = +$(this).val();
4
name = $(this).attr("name");
5
const newContent = Array.from(Array(count+1).keys()) // cleate an array from 0 to count+1
6
.slice(1) // get rid of the `0` to use ${i} from `1`
7
.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>`))
8
$("#wrapper").html(newContent.join("")); // add the array to the wrapper after joining it
9
});
10
});
JavaScript
1
13
13
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<select id="selectchild1" class="form-control">
3
<option value="0">00</option>
4
<option value="1">01</option>
5
<option value="2">02</option>
6
<option value="3">03</option>
7
<option value="4">04</option>
8
<option value="5">05</option>
9
<option value="6">06</option>
10
</select>
11
<div id="wrapper" class="col-xs-3 col-sm-3 col-md-8 text-right">
12
13
</div>