Quiero crear etiquetas seleccionadas según el valor de la etiqueta de entrada con el tipo 'número'. Mi problema es que, al aumentar el valor de entrada, las etiquetas seleccionadas se crean correctamente. Pero el valor decreciente aún produce una nueva etiqueta de selección. Sin embargo, quiero que se elimine y se iguale al valor de la entrada de números. Lo que quiero decir es ;
valor = 2 , seleccione la etiqueta creada = 2 valor = 1 , seleccione la etiqueta creada = 1 valor = 4 , seleccione la etiqueta creada = 4
CÓDIGO
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">Su primer error es que olvidó agregar un corchete en la entrada. Esto es incorrecto en la entrada = " getChildNumberAndAges ".
<input type="number" id="cCount" oninput="getChildNumberAndAges()">y antes de agregar, debe borrar div o el elemento donde agrega, hay varias formas para esto que uso
jQuery('#counter2').html('')para una aclaración detallada, aquí está el código de trabajo, espero que esto sea útil para usted.
<!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>Primero, no estás llamando a getChildNumberAndAges
<input type="number" id="cCount" oninput="getChildNumberAndAges()">
y también deberías primero. vacía el valor anterior (asumiré que tienes un div con id=counter2 )
Y lo último es que for loop no es una buena manera, primero cree un elemento <select> como una variable con jQuery, luego agregue las <option> s y luego agregue el objeto completo a su div. usted debe a todo el procedimiento para cada niño.
<!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>