I want to create select tags depending on the value of input tag with 'number' type. My problem is , when increasing value of input, select tags are created successfully. But decreasing value still produces a new select tag. However , I want it to be deleted and equaled to the value of number input. What I mean is ;
value = 2 , select tag created = 2 value = 1 , select tag created = 1 value = 4 , select tag created = 4
CODE
var childNumber
var childAges
function getChildNumberAndAges() {
childNumber = document.getElementById('cCount').value
//console.log(childNumber)
jQuery('<select>', {
class: 'child-age' + childNumber.toString(),
}).appendTo('#counter2');
for (let i = 0; i < 19; i++) {
jQuery('<option>', {
value: i.toString(),
class: 'age',
}).html(i.toString() + ' years old').appendTo('.child-age' + childNumber.toString());
}
// console.log($('#counter2>select').length)
// console.log(childNumber === $('#counter2>select').length)
}<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<input type="number" id="cCount" oninput="getChildNumberAndAges">Your first mistake is you forget to add a bracket in the input this is wrong oninput="getChildNumberAndAges" this correct oninput="getChildNumberAndAges()"
<input type="number" id="cCount" oninput="getChildNumberAndAges()">
and before append you must need to clear div or element where you append there is multiple way for this i use
jQuery('#counter2').html('')
for detailed clarification here is the working code hope this will helpful for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var childNumber
var childAges
function getChildNumberAndAges() {
jQuery('#counter2').html('')
childNumber = document.getElementById('cCount').value
//console.log(childNumber)
var childage = childNumber++;
jQuery('<select>', {
class: 'child-age' + childNumber.toString(),
}).appendTo('#counter2');
for (let i = 1; i <= childage; i++) {
jQuery('<option>', {
value: i.toString(),
class: 'age',
}).html(i.toString() +' years old').appendTo('.child-age' + childNumber.toString());
}
// console.log($('#counter2>select').length)
// console.log(childNumber === $('#counter2>select').length)
}
</script>
</head>
<body>
<input type="number" id="cCount" oninput="getChildNumberAndAges()">
<div id="counter2"></div>
</body>
</html>First, you're not calling getChildNumberAndAges
<input type="number" id="cCount" oninput="getChildNumberAndAges()">
and also you should first. empty the previous value ( I will assume you have a div with id=counter2 )
And last thing is you for loop is not a good way, first create a <select> element as a variable with jQuery, then append the <option>s to it and then append the whole object to your div. you should to all the procedure for every child.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
var childNumber
var childAges = 19;
function getChildNumberAndAges() {
jQuery('#counter2').html(''); // first empty the previous values !
childNumber = document.getElementById('cCount').value
//console.log(childNumber)
for(var x =0 ;x < childNumber; x++){
var select = jQuery('<select>', {
class: 'child-age' + childNumber.toString(),
});
for (let i = 0; i < childAges; i++) {
jQuery('<option>', {
value: i.toString(),
class: 'age',
}).html(i.toString() + ' years old').appendTo(select);
}
jQuery("#counter2").append(select);
}
}
</script>
</head>
<body>
<input type="number" id="cCount" oninput="getChildNumberAndAges()">
<div id="counter2"></div>
</body>
</html>