How can I control <input type="number"> tag to create select elements?-CodePudding

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">

CodePudding user response：

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>

CodePudding user response：

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>