英文:
How do I update dropdown options after input data change
问题
以下是您要翻译的内容：
I have dropdown list where options are filling with values inside js code. After click on submit button, I want my dropdown to be changed for updated values, but it will just add new values to already existed values.
My idea was in deleting all options before they are creating, so options with new values will be added from a scratch.
So I tried to receive the length of datalist, but something like var x = document.getElementById("browsers").options.length; from w3schools doesn't work.
In addition, I tried to receive all options with setting className for option and then get all options with const options = document.getElementsByClassName('datalist-option') and with this try I received all options, but then I can't iterate through them to do the following way:
const options = document.getElementsByClassName('datalist-option')
options.forEach(option => option.value = '')
which returns me error:
Uncaught TypeError: options.forEach is not a function
at HTMLButtonElement.<anonymous>
Code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const input = document.querySelector('#input')
const datalist = document.querySelector('#datalist')
const submitButton = document.querySelector('#submit-button')
const values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
values.forEach(value => {
const option = document.createElement('option')
option.value = value
datalist.appendChild(option)
})
submitButton.addEventListener('click', (e) => {
e.preventDefault()
values.splice(0, 5)
values.forEach(value => {
const option = document.createElement('option')
option.value = value
datalist.appendChild(option)
})
})
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./test.js" defer></script>
</head>
<body>
<input type="text" list="datalist" id="input">
<datalist id="datalist"></datalist>
<button type="submit" id="submit-button">Submit</button>
</body>
</html>
英文:
I have dropdown list where options are filling with values inside js code. After click on submit button, I want my dropdown to be changed for updated values, but it will just add new values to already existed values.
My idea was in deleting all options before they are creating, so options with new values will be added from a scratch.
So I tried to receive the length of datalist, but something like var x = document.getElementById("browsers").options.length; from w3schools doesn't work.
In addition, I tried to receive all options with setting className for option and then get all options with const options = document.getElementsByClassName('datalist-option') and with this try I received all options, but then I can't iterate through them to do the following way:
const options = document.getElementsByClassName('datalist-option')
options.forEach(option => option.value = '')
which returns me error:
Uncaught TypeError: options.forEach is not a function
at HTMLButtonElement.<anonymous>
Code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const input = document.querySelector('#input')
const datalist = document.querySelector('#datalist')
const submitButton = document.querySelector('#submit-button')
const values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
values.forEach(value => {
const option = document.createElement('option')
option.value = value
datalist.appendChild(option)
})
submitButton.addEventListener('click', (e) => {
e.preventDefault()
values.splice(0, 5)
values.forEach(value => {
const option = document.createElement('option')
option.value = value
datalist.appendChild(option)
})
})
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./test.js" defer></script>
</head>
<body>
<input type="text" list="datalist" id="input">
<datalist id="datalist"></datalist>
<button type="submit" id="submit-button">Submit</button>
</body>
</html>
<!-- end snippet -->
答案1
得分: 0
这个问题实际上并不是发布给我来回答的，但实际上我找到了一个解决方案。
我遍历了datalist的子元素，它返回HTMLCollection。
for (let option of datalist.children)
option.value = '';
现在代码按照它应该的方式工作。
const input = document.querySelector('#input')
const datalist = document.querySelector('#datalist')
const submitButton = document.querySelector('#submit-button')
const values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
values.forEach(value => {
const option = document.createElement('option')
option.value = value
option.id = 'datalist-option'
datalist.appendChild(option)
})
submitButton.addEventListener('click', (e) => {
e.preventDefault()
values.splice(0, 5)
for (let option of datalist.children)
option.value = '';
values.forEach(value => {
const option = document.createElement('option')
option.value = value
datalist.appendChild(option)
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./test.js" defer></script>
</head>
<body>
<input type="text" list="datalist" id="input">
<datalist id="datalist"></datalist>
<button type="submit" id="submit-button">Submit</button>
</body>
</html>
希望这可以帮助你。
英文:
Actually this question wasn't published just me to answer it, but actually I've found a solution.
I iterated through datalist children which returns HTMLCollection
for (let option of datalist.children)
option.value = ''
And now code works as it has to
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const input = document.querySelector('#input')
const datalist = document.querySelector('#datalist')
const submitButton = document.querySelector('#submit-button')
const values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
values.forEach(value => {
const option = document.createElement('option')
option.value = value
option.id = 'datalist-option'
datalist.appendChild(option)
})
submitButton.addEventListener('click', (e) => {
e.preventDefault()
values.splice(0, 5)
for (let option of datalist.children)
option.value = ''
values.forEach(value => {
const option = document.createElement('option')
option.value = value
datalist.appendChild(option)
})
})
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./test.js" defer></script>
</head>
<body>
<input type="text" list="datalist" id="input">
<datalist id="datalist"></datalist>
<button type="submit" id="submit-button">Submit</button>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论