使用搜索/过滤器下拉菜单更改值变量

时间:2018-09-26 16:31:45

标签: javascript html

我有这个搜索/过滤器下拉列表,它将allNameMuseums()方法的数组作为值,即[“ ACQUARIUM”,“ Museo2”,“ Museo3”]。

<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown">
   <button onclick="myFunction()" class="dropbtn">Dropdown</button>
   <div id="myDropdown" class="dropdown-content">
      <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
   </div>
</div>

我有一个全局变量name,每次单击搜索/过滤器下拉列表中的一个值时,该名称都会使用该值,即,如果我单击ACQUARIO,则name将是ACQUARIO

document.addEventListener("DOMContentLoaded", function(event) {
    allNameMuseums().forEach(function(item) { // ITERAZIONE
        document.getElementById("myDropdown").innerHTML += '<a onclick="fnclick(this)">' + item + '</a>';
    })
});

var name; //globle variable so you can access in your method

function fnclick(obj) {
    name = obj.innerHTML;
    console.log(name);
}


function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myDropdown");
    a = div.getElementsByTagName("a");
    for (i = 0; i < a.length; i++) {
        if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
    }
}

function allNameMuseums() {
    return ["ACQUARIO", "Museo2", "Museo3"];
}

我有两个异步方法specificoMuseo(name)allMuseums(),还有一个变量var data = proof;,它使用allMuseums()方法的结果。我希望当我单击“搜索/过滤器下拉列表”的ACQUARIO时,变量“数据”将specificoMuseo("ACQUARIO")的结果作为输入。

specificoMuseo(name).then(proof2 => {
    allMuseums().then(proof => {
        var data = proof;
    });
});

1 个答案:

答案 0 :(得分:0)

您可以使用await关键字代替promise:

var data = await specificoMuseo("ACQUARIO"); // This is like proof2
var data2 = await allMuseums(); // This is like proof

如果由于任何承诺相互依赖而要并行运行此过程,则可以使用Primise.all方法:

Promise.all([specificoMuseo("ACQUARIO"), allMuseums()])
  .then(([proof2, proof]) => {
    // ...
  })

使用await关键字:

var [proof2, proof] = Promise.all([specificoMuseo("ACQUARIO"), allMuseums()])

编辑:

当您点击“ ACQUARIO”时,该功能将被fnclick(this)触发

function fnclick(obj) {
    name = obj.innerHTML;
    var [proof2, proof] = Promise.all([specificoMuseo(name), allMuseums()])
    console.log(name);
}