如何控制 <input type="number"> 标签来创建选择元素？答案

【问题标题】：How can I control <input type="number"> tag to create select elements?如何控制 <input type="number"> 标签来创建选择元素？
【发布时间】：2021-12-16 19:32:58
【问题描述】：

我想根据“数字”类型的输入标签的值创建选择标签。我的问题是，当增加输入值时，选择标签创建成功。但是减小值仍然会产生一个新的选择标签。但是，我希望它被删除并等于数字输入的值。我的意思是;

值 = 2 ，选择标签创建 = 2 值 = 1 ，选择标签创建 = 1 value = 4 ，选择创建的标签 = 4

代码

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

【问题讨论】：

标签： javascript html jquery html-select html-input

【解决方案1】：

首先，你没有打电话给getChildNumberAndAges

<input type="number" id="cCount" oninput="getChildNumberAndAges()">

你也应该首先。清空之前的值（我假设你有一个 div 和 id=counter2）

最后一件事是你的for循环不是一个好方法，首先使用jQuery创建一个<select>元素作为变量，然后将<option>s附加到它，然后将整个对象附加到你的div。您应该为每个孩子完成所有程序。

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

【讨论】：

谢谢。在 for 循环括号中创建选择后，代码似乎可以正常工作。 .html() 也是我无法实现的解决方案的关键。

【解决方案2】：

您的第一个错误是您忘记在输入中添加括号这是错误的oninput="getChildNumberAndAges" 这是正确的oninput="getChildNumberAndAges()"

<input type="number" id="cCount" oninput="getChildNumberAndAges()">

在追加之前，您必须清除追加的 div 或元素我有多种方法可以使用

 jQuery('#counter2').html('')

这里是工作代码的详细说明，希望这对您有所帮助。

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

【讨论】：

谢谢。在 for 循环括号中创建选择后，代码似乎可以正常工作。 .html() 也是我无法实现的解决方案的关键。