![](/img/trans.png)
[英]I'm trying to make text box in javascript, and to send the entered values in a textbox in a array to add them
[英]Datalist not into text box when I'm trying to add my array's values to it as options
新手在这里。 我编写了一个程序,可以在文本框中键入表达式,然后单击按钮以将其作为项目提交给数组。我正在尝试制作一个数据列表,该列表具有该数组中的值作为选项,并且我尝试了在线提供的解决方案,但无法使其正常工作。 你能帮助我吗?
<!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>
您可以使用JavaScript Array.prototype.includes()
方法
var fruits = ["Banana", "Orange", "Apple", "Mango"];
if (fruits.includes("Mango")) {
console.log('Mango');
}
您必须使用TEF
变量的值创建进入<datalist>
的HTML。
这样的事情可以解决这个问题:
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.