Question

新手在这里。我编写了一个程序，可以在文本框中键入表达式，然后单击按钮以将其作为项目提交给数组。我正在尝试制作一个数据列表，该列表具有该数组中的值作为选项，和我已经尝试过在线提供的解决方案，但无法使其正常工作。你能帮我吗？

<!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">&times;</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>

Answer 1

您可以使用JavaScript Array.prototype.includes()方法

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
  if (fruits.includes("Mango")) {
    console.log('Mango');
  }

Answer 2

您必须使用<datalist>变量中的值创建进入TEF的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">&times;</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>

尝试将数组的值添加到文本列表中时，数据列表未进入文本框

2 个答案: