Question

因此，我有这段代码可以从邮政编码中获取地址列表。它通过使用api中的GET函数来实现。当返回JSON数据时，我将其拆分了，现在在函数内部有一个javascript数组，用于操作DOM来添加一个下拉菜单，用户可以从中选择其地址

我当前正在使用一个下拉菜单，用户可以从地址列表和onclick功能中选择他们的地址（这是我遇到的问题）。函数应从中填充其他字段（目前无需担心）。抱歉，这是一个不好的解释，但是有很多事情要做！

    var soil = new XMLHttpRequest();
    var a="";
    
    function findAddress (){
        stuff = document.getElementById("postcode").value;
        soil.open("GET", "https://api.getaddress.io/find/"+stuff+"?api-key=x", false);
        soil.send(null);
        var r = JSON.parse(soil.response);
    
        var x = document.getElementById("address");   // Get the element with id="demo"
        var str="";
        x.innerHTML+="<div class=dropdown> <button onclick=myFunction() class=dropbtn>Dropdown</button>   <div id=myDropdown class=dropdown-content>";
        var y = document.getElementById("myDropdown");
        for (i=0;i<r.addresses.length;i++){
            a=r.addresses[i];
            y.innerHTML+="<a onclick=submitAddress(a)>" + r.addresses[i] + "</a>";
        }
        x.innerHTML+="</div>";
        x.innerHTML+="</div>";
    }
    function submitAddress(a){
        
        var x = document.getElementById("address");   // Get the element with id="demo"
        x.innerHTML = "";
        document.getElementById("houseNum").value = a;
    }
    
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }
    
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }

<select>
    <option type="submit" value="mr">Mr</option>
    <option type="submit" value="mrs">Mrs</option>
    <option type="submit" value="ms">Ms</option>
    <option type="submit" value="miss">Miss</option>
    <option type="submit" value="dr">Dr</option>
 </select><br><br>
    
    
    <label>First Name<span style="color:red;">*</span>:</label>&nbsp;
    <input type="text" class="payment_firstname" name="firstname" required><br><br><br>
    <label>Surname:</label>&nbsp;
    <input type="text" class="payment_lastname" name="lastname"><br><br><br>
    <label>Email Address<span style="color:red;">*</span>:</label>&nbsp;
    <input type="text" class="payment_email" name="email" required><br><br><br>
    <label>Confirm Email<span style="color:red;">*</span>:</label>&nbsp;
    <input type="text" class="payment_cemail" name="cemail" required><br><br><br>
     <label>Telephone:</label>&nbsp;
     <input type="text" class="payment_telephone" name="Telephone" ><br><br><br>
    <label>House Name/No:</label>&nbsp;
    <input type="text" id="houseNum" class="payment_telephone" name="houseNum" ><br><br><br>
    <label>County:</label>&nbsp;
    <input type="text" id="houseCounty" class="payment_telephone" name="houseCounty" ><br><br><br>
    <label>Postcode:</label>&nbsp;
    
    <input type="text" id="postcode" class="payment_postcode" name="Postcode">&nbsp;<button onclick="findAddress()" style="height: 35px;">Find Address</button><br><br>

我得到的结果是属性的数量被放入函数中，而不是数组的完整索引字符串，即测试新月，测试城市，测试县-1以及正在馈入的所有内容函数是第一个数字

Answer 1

我不确定我是否正确，但是例如要构建数组中的选择选项，可以使用map()函数。检查用户在选择中更改的地址是否可以使用onchange事件而不是onclick https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onchange

let addressesArray = [
"67-69 Shelton Street, , , , , London, ",
    "Aace Cleaning group limited, Shelton Street, , , , London, Greater London",
    "Annabelle Grace Events Management, 71-75 Shelton Street, , , , London, Greater London",
    "Apex Base Solutions, 71-75 Shelton Street, , , , London, "
]
let list = addressesArray.map( item => `<option>${item}</option>`);
var select = document.createElement('select');
select.innerHTML = list;
document.body.appendChild(select);

只是想看看是否有一种将字符串变量连接到onclick函数上的方法？

1 个答案: