Question

我正在尝试将API中的100个值循环到下拉列表中。当函数运行时，页面加载所有100个值，但将它们插入到1行的列表中，而不是100个单独的行。我试过在循环中添加一个break标记，但是没有用。你如何将每个项目分成自己的一行？

// GET STATION NAMES AND PUT THEM INTO DROPDOWN LIST
function addressList() {
    // var xhr = new XMLHttpRequest();
    // xhr.open('GET', 'https://api.jcdecaux.com/vls/v1/stations?contract=Dublin&apiKey=xxxxxxxxxx');
    // xhr.onreadystatechange = function() {
    //      if (xhr.readyState == 4 && xhr.status == 200) {
    //          var items = JSON.parse(xhr.responseText);
                var items = [{"address":"Smithfield North"},{"address":"Parnell Square North"},{"address":"Pearse Street"},{"address":"Excise Walk"},{"address":"Fitzwilliam Square West"},{"address":"St. James Hospital (Central)"},{"address":"Hanover Quay"},{"address":"Oliver Bond Street"},{"address":"Collins Barracks Museum"},{"address":"Brookfield Road"},{"address":"Clonmel Street"},{"address":"Mount Street Lower"},{"address":"Christchurch Place"},{"address":"Grantham Street"},{"address":"York Street East"},{"address":"Portobello Road"},{"address":"Parnell Street"},{"address":"Frederick Street South"},{"address":"Fownes Street Upper"},{"address":"Clarendon Row"},{"address":"Custom House"},{"address":"Benson Street"},{"address":"Fenian Street"},{"address":"South Dock Road"},{"address":"The Point"},{"address":"Lime Street"},{"address":"Kilmainham Gaol"},{"address":"Guild Street"},{"address":"Herbert Place"},{"address":"Western Way"},{"address":"Newman House"},{"address":"King Street North"},{"address":"Herbert Street"},{"address":"Earlsfort Terrace"},{"address":"Golden Lane"},{"address":"Deverell Place"},{"address":"John Street West"},{"address":"City Quay"},{"address":"Exchequer Street"},{"address":"Hatch Street"},{"address":"Charlemont Street"},{"address":"Hardwicke Place"},{"address":"Wolfe Tone Street"},{"address":"Francis Street"},{"address":"Greek Street"},{"address":"High Street"},{"address":"North Circular Road"},{"address":"Talbot Street"},{"address":"Sir Patrick's Dun"},{"address":"New Central Bank"},{"address":"Georges Quay"},{"address":"Mount Brown"},{"address":"Royal Hospital"},{"address":"Heuston Station (Central)"},{"address":"Townsend Street"},{"address":"Portobello Harbour"},{"address":"Custom House Quay"},{"address":"Molesworth Street"},{"address":"Kilmainham Lane"},{"address":"Market Street South"},{"address":"Kevin Street"},{"address":"Eccles Street East"},{"address":"Grand Canal Dock"},{"address":"Merrion Square East"},{"address":"York Street West"},{"address":"St. Stephen's Green South"},{"address":"Denmark Street Great"},{"address":"Heuston Station (Car Park)"},{"address":"St. Stephen's Green East"},{"address":"Eccles Street"},{"address":"Mater Hospital"},{"address":"Blessington Street"},{"address":"Merrion Square West"},{"address":"Convention Centre"},{"address":"Hardwicke Street"},{"address":"Smithfield"},{"address":"Dame Street"},{"address":"Sandwith Street"},{"address":"Princes Street / O'Connell Street"},{"address":"Grattan Street"},{"address":"St James Hospital (Luas)"},{"address":"Bolton Street"},{"address":"Strand Street Great"},{"address":"Barrow Street"},{"address":"Mountjoy Square West"},{"address":"Wilton Terrace"},{"address":"Leinster Street South"},{"address":"James Street"},{"address":"Parkgate Street"},{"address":"Heuston Bridge (South)"},{"address":"Cathal Brugha Street"},{"address":"Rothe Abbey"},{"address":"Upper Sherrard Street"},{"address":"Fitzwilliam Square East"},{"address":"Harcourt Terrace"},{"address":"Jervis Street"},{"address":"Ormond Quay Upper"},{"address":"Emmet Road"},{"address":"Heuston Bridge (North)"},{"address":"Blackhall Place"}];
                var output = '<select>'
                for (var i in items) {
                    output += '<option>' + items[i].address + '</option>  <br>'
                }
                output += '</select>'
                document.getElementById("replaceOption").innerHTML = output
    //      }
    // }
    // xhr.send();
};

<!DOCTYPE html>
<html>
<head>
    <script src="stations.js"></script>
    <title></title>
</head>
<body onload="addressList()">
    <div>
        <div id="addressDropdown">
            <form>
                <select>
                    <option id="addressList" value="select station" selected="selected">Select Station..</option>
                    <option id="replaceOption">0</option>
                </select>
                <br>
                <input type="submit" value="Go" id="sumbit" href="#">
            </form>
        </div>
    </div>
</body>
</html>

Answer 1

将您的选项附加到自己的select元素。它全部在一条线上的原因是因为您在现有选项中添加新选项，而不是在现有选项之后附加。

// GET STATION NAMES AND PUT THEM INTO DROPDOWN LIST function addressList() { var items = [{"address":"Smithfield North"},{"address":"Parnell Square North"},{"address":"Pearse Street"},{"address":"Excise Walk"},{"address":"Fitzwilliam Square West"},{"address":"St. James Hospital (Central)"},{"address":"Hanover Quay"},{"address":"Oliver Bond Street"},{"address":"Collins Barracks Museum"},{"address":"Brookfield Road"},{"address":"Clonmel Street"},{"address":"Mount Street Lower"},{"address":"Christchurch Place"},{"address":"Grantham Street"},{"address":"York Street East"},{"address":"Portobello Road"},{"address":"Parnell Street"},{"address":"Frederick Street South"},{"address":"Fownes Street Upper"},{"address":"Clarendon Row"},{"address":"Custom House"},{"address":"Benson Street"},{"address":"Fenian Street"},{"address":"South Dock Road"},{"address":"The Point"},{"address":"Lime Street"},{"address":"Kilmainham Gaol"},{"address":"Guild Street"},{"address":"Herbert Place"},{"address":"Western Way"},{"address":"Newman House"},{"address":"King Street North"},{"address":"Herbert Street"},{"address":"Earlsfort Terrace"},{"address":"Golden Lane"},{"address":"Deverell Place"},{"address":"John Street West"},{"address":"City Quay"},{"address":"Exchequer Street"},{"address":"Hatch Street"},{"address":"Charlemont Street"},{"address":"Hardwicke Place"},{"address":"Wolfe Tone Street"},{"address":"Francis Street"},{"address":"Greek Street"},{"address":"High Street"},{"address":"North Circular Road"},{"address":"Talbot Street"},{"address":"Sir Patrick's Dun"},{"address":"New Central Bank"},{"address":"Georges Quay"},{"address":"Mount Brown"},{"address":"Royal Hospital"},{"address":"Heuston Station (Central)"},{"address":"Townsend Street"},{"address":"Portobello Harbour"},{"address":"Custom House Quay"},{"address":"Molesworth Street"},{"address":"Kilmainham Lane"},{"address":"Market Street South"},{"address":"Kevin Street"},{"address":"Eccles Street East"},{"address":"Grand Canal Dock"},{"address":"Merrion Square East"},{"address":"York Street West"},{"address":"St. Stephen's Green South"},{"address":"Denmark Street Great"},{"address":"Heuston Station (Car Park)"},{"address":"St. Stephen's Green East"},{"address":"Eccles Street"},{"address":"Mater Hospital"},{"address":"Blessington Street"},{"address":"Merrion Square West"},{"address":"Convention Centre"},{"address":"Hardwicke Street"},{"address":"Smithfield"},{"address":"Dame Street"},{"address":"Sandwith Street"},{"address":"Princes Street / O'Connell Street"},{"address":"Grattan Street"},{"address":"St James Hospital (Luas)"},{"address":"Bolton Street"},{"address":"Strand Street Great"},{"address":"Barrow Street"},{"address":"Mountjoy Square West"},{"address":"Wilton Terrace"},{"address":"Leinster Street South"},{"address":"James Street"},{"address":"Parkgate Street"},{"address":"Heuston Bridge (South)"},{"address":"Cathal Brugha Street"},{"address":"Rothe Abbey"},{"address":"Upper Sherrard Street"},{"address":"Fitzwilliam Square East"},{"address":"Harcourt Terrace"},{"address":"Jervis Street"},{"address":"Ormond Quay Upper"},{"address":"Emmet Road"},{"address":"Heuston Bridge (North)"},{"address":"Blackhall Place"}]; for (var i in items) { document.getElementById("mySelect").innerHTML += '<option>' + items[i].address + '</option>'; } };

<!DOCTYPE html> <html> <head> <script src="stations.js"></script> <title></title> </head> <body onload="addressList()"> <div> <div id="addressDropdown"> <form> <select id="mySelect"> <option id="addressList" value="select station" selected="selected">Select Station..</option> <option id="replaceOption">0</option> </select> <br> <input type="submit" value="Go" id="sumbit" href="#"> </form> </div> </div> </body> </html>

Answer 2

document.addEventListener('DOMContentLoaded', function () {
  let selectEl = document.getElementById('select-el');
  
  let xhr = new XMLHttpRequest();
  
  xhr.onreadystatechange = function (res) {
    if (xhr.readyState == 4 && xhr.status == 200) {
      let items = JSON.parse(xhr.responseText);
      console.log(items);
      items.forEach(function (item) {
        let option = document.createElement('option');
        option.value = item.name;
        option.innerText = item.address;
        
        selectEl.appendChild(option);
      });
    }
  }
  
  xhr.open('GET', 'https://api.jcdecaux.com/vls/v1/stations?contract=Dublin&apiKey=xxxxxxxxxx');
  xhr.send();

});

<!DOCTYPE html>
<html>

<head>
  <script src="stations.js"></script>
  <title></title>
</head>

<body>
  <div>
    <div id="addressDropdown">
      <form>
        <select id="select-el"></select>
        <br/>
        <input type="submit" value="Go" id="sumbit" href="#" />
      </form>
    </div>
  </div>
</body>

</html>

Answer 3

问题是您在现有选择中插入了额外的<select>。这是输出HTML的样子：

<form>
  <select>
    <option id="addressList" ...</option>
    <option id="replaceOption">
      <select>
        <option>Smithfield North</option>
        ...

您要做的是直接将选项附加到选择框，而不是替换现有选项。请注意，选择框现在具有ID而不是选项框。这是您需要的代码：

//GET STATION NAMES AND PUT THEM INTO DROPDOWN LIST
function addressList() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.jcdecaux.com/vls/v1/stations?contract=Dublin&apiKey=xxxxxxxxxx');
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var items = JSON.parse(xhr.responseText);
            
            // get the select box by id
            var addressList = document.getElementById("addressList")

            // loop through all of the items and add an option to the list
            for (var i in items) {
                var option = document.createElement("option");
                option.text = items[i].address;
                option.value = i
                addressList.add(option)
            }

        }
    }
    xhr.send();
};

<!DOCTYPE html>
<html>
    <head>
        <script src="stations.js"></script>
        <title></title>
    </head>
    <body onload="addressList()">
        <div>
            <div id="addressDropdown">
                <form>
                    <select id="addressList">
                        <option value="select station" selected="selected">Select Station..</option>
                    </select>
                    <br>
                    <input type="submit" value="Go" id="sumbit" href="#">
                </form>
            </div>
        </div>
    </body>
</html>

循环

3 个答案: