![](/img/trans.png)
[英]How to capture 'enter' key on dynamically created input tag - Vanilla JS
[英]how to capture the value of a created input in js
我为每个选项创建了一个输入字段,我需要捕获用户输入的值以执行一些计算&不确定创建的输入是否与所选选项相关? 这是 class 中称为“药物”的方法
<select id="drugname" name="drugname" required>
<option value="" selected ></option>
<option value="v1" >v1</option>
<option value="v2" >v2</option>
<option value="v3" >v3</option>
</select>
chooseOption(){
const arr = Array.from(document.getElementById('drugname').selectedOptions)
arr.forEach(option=>{
if(this.selected.includes(option.value) || option.value== '') return
this.selected.push(option.value)
const label= document.createElement('label')
const input= document.createElement('input')
input.setAttribute("type", "number")
input.id= option.value
label.setAttribute= ("for","drugname")
label.innerText= option.value
document.getElementById('test').append(label)
document.getElementById('test').append(input)
return this.selected
})}
const selectit= document.querySelector('#drugname')
selectit.addEventListener('change',()=>{
Drugs.chooseOption()
由于它不是多选,因此您不需要使用selectedOptions
。 只需使用selectit.value
即可获取当前值。
为了使用this
来引用属性,您应该在Drugs
class 的实例上调用chooseOption()
方法,而不是 class 本身。
class Drugs { constructor() { this.selected = []; } chooseOption() { let value = selectit.value; if (value == '') { return; } if (this.selected.includes(value)) { return; } this.selected.push(value); const label = document.createElement('label') const input = document.createElement('input') input.setAttribute("type", "number") input.id = value label.setAttribute = ("for", "drugname") label.innerText = value document.getElementById('test').append(label) document.getElementById('test').append(input) } } const selectit = document.querySelector('#drugname'); const drug = new Drugs(); selectit.addEventListener('change', () => { drug.chooseOption() });
<select id="drugname" name="drugname" required data-selected='[]'> <option value="" selected></option> <option value="v1">v1</option> <option value="v2">v2</option> <option value="v3">v3</option> </select> <div id="test"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.