这里是新手。我制作了一个程序，您可以在其中在文本框中键入一个表达式，然后单击一个按钮将其作为一个项目提交给一个数组。我正在尝试制作一个数据列表，该列表具有该数组中的值作为选项，和 我尝试了网上提供的解决方案，但无法解决问题。你能帮帮我吗？
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<button id="clearcustom" type="button">Show Modal</button>
<textarea id="writefrase" rows="2" cols="25" placeholder="Write the expression you want to add to the array"></textarea>
<button id="submeter" type="button">Submit</button>
<div class="clearpopup">
<div class="clearpopupheader">
<span class="closeclearpopup">×</span>
<p>Choose the option</p>
</div>
<div class="clearpopupcontent">
<form>
<input id="chooseclear" list="chooseclearlist" name="items" />
<datalist id="chooseclearlist"></datalist>
</form>
<button id="clearpopupbutton">Choose</button>
</div>
</div>
<script type="text/javascript">
var TEF = [];
$("#submeter").click(function() {
var newitem = $("#writefrase").val();
if (newitem) {
TEF.push(newitem);
$("#writefrase").val("");
}
});
let modalBtn = document.getElementById("clearcustom")
let modal = document.querySelector(".clearpopup")
let closeBtn = document.querySelector(".closeclearpopup")
modalBtn.onclick = function () {
modal.style.display = "block"
}
closeBtn.onclick = function () {
modal.style.display = "none"
}
</script>
</body>
</html>
最佳答案
您必须创建进入您的 <datalist> 的 HTML使用 TEF 中的值多变的。
像这样的东西就可以了:
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<button id="clearcustom" type="button">Show Modal</button>
<textarea id="writefrase" rows="2" cols="25" placeholder="Write the expression you want to add to the array"></textarea>
<button id="submeter" type="button">Submit</button>
<div class="clearpopup">
<div class="clearpopupheader">
<span class="closeclearpopup">×</span>
<p>Choose the option</p>
</div>
<div class="clearpopupcontent">
<form>
<input id="chooseclear" list="chooseclearlist" name="items" />
<datalist id="chooseclearlist"></datalist>
</form>
<button id="clearpopupbutton">Choose</button>
</div>
</div>
<script type="text/javascript">
var TEF = [];
function redrawDataList(){
let options = [];
TEF.forEach( el => {
options.push(` <option value="${el}">`)
})
$("#chooseclearlist").html(options.join("\n"))
}
$("#submeter").click(function() {
var newitem = $("#writefrase").val();
if (newitem) {
TEF.push(newitem);
$("#writefrase").val("");
}
redrawDataList();
});
let modalBtn = document.getElementById("clearcustom")
let modal = document.querySelector(".clearpopup")
let closeBtn = document.querySelector(".closeclearpopup")
modalBtn.onclick = function () {
modal.style.display = "block"
}
closeBtn.onclick = function () {
modal.style.display = "none"
}
</script>
</body>
</html>
关于javascript - 当我尝试将数组的值作为选项添加到文本框中时，数据列表未进入文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57868962/