标签来创建选择元素？,javascript,html,jquery,html-select,html-input"/>
时间戳

首页 > 解决方案 > 我该如何控制标签来创建选择元素？

javascript - 我该如何控制标签来创建选择元素？

问题描述

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

值 = 2，选择标签创建 = 2 值 = 1，选择标签创建 = 1 值 = 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">

标签： javascripthtmljqueryhtml-selecthtml-input

解决方案

你的第一个错误是你忘记在输入中添加一个括号这是错误的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>

推荐阅读