[英]How can I control <input type="number"> tag to create select elements?
我想根據“數字”類型的輸入標簽的值創建選擇標簽。 我的問題是，當增加輸入值時，成功創建了選擇標簽。 但是減少值仍然會產生一個新的選擇標簽。 但是，我希望它被刪除並等於數字輸入的值。 我的意思是 ;
值= 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">
你的第一個錯誤是你忘記在輸入中添加括號這是錯誤的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>
首先，你不是在調用getChildNumberAndAges
<input type="number" id="cCount" oninput="getChildNumberAndAges()">
而且你應該首先。 清id=counter2一個值（我假設你有一個id=counter2的div ）
最后一件事是你的 for 循環不是一個好方法，首先用 jQuery 創建一個<select>元素作為變量，然后將<option>附加到它，然后將整個對象附加到你的 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>
如何使用按鈕創建 select 輸入標簽並將選定的標簽存儲在 state
[英]How Can I create a select input tag using Buttons and store the selected one in state
如果“選擇”標記更改其值，如何刪除和創建帶有其父元素的輸入字段
[英]How to Remove and create a input field with its parent Elements if Select tag change its value
(Vue.js) 如何使用數據中的數值數組中的選項標簽填充選擇標簽？
[英](Vue.js) How can I populate the select tag with option tag from array of number values in data?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.