如何控制 <input type="number"> 标签来创建选择元素？
Posted
技术标签:
【中文标题】如何控制 <input type="number"> 标签来创建选择元素？【英文标题】：How can I control <input type="number"> tag to create select elements? 【发布时间】：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">【问题讨论】：
【参考方案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() 也是我无法实现的解决方案的关键。以上是关于如何控制 <input type="number"> 标签来创建选择元素？的主要内容，如果未能解决你的问题，请参考以下文章
如何获取 <input type="number"> 字段的原始值？
如何获取 <input type="number"> 字段的原始值？