如何从Materialize下拉菜单中获取多个选项以自动查询API？

时间：2019-01-09 02:37:25

标签： javascript jquery api materialize apex

我正在研究一个项目，用户可以从我从Materialize那里获得的下拉菜单中从状态列表中进行选择，其目的是要查询National Park Service Data API并在其国家公园中获取有关公园的信息。状态。但是，我在让用户选择自动查询API甚至使用提交按钮时遇到问题。下拉列表起作用，并且允许用户选择多个状态，然后单击关闭并单击“提交”，但没有任何反应。预先感谢您的帮助。

 <div class="parallax-container valign-wrapper" id="searchid">
<div class="section no-pad-bot">
  <div class="container">
    <div class="row center">
      <img src="search.png">
    </div>
  </div>
</div>
<div class="parallax"><img src="b15.jpg" alt="Unsplashed background img 2"></div>

    

  <div class="row">
    <div class="input-field col s12">
      <select multiple>
        <option value="" disabled unselected>Choose your state</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="PR">Puerto Rico</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>
      <label>Search</label>
      <button class="btn waves-effect waves-light" type="submit" name="action">Submit
        <i class="material-icons right">send</i>
      </button>
    </div>
  </div>

</div>


var apiKey = "kjVPCM3LEwQYZxkv4byFPo1TRCvJk61IAO9wwtyI";
var searchTerm = "";
var stateTerm = "CA";

var queryURL = "https://api.nps.gov/api/v1/parks?q=" + searchTerm + "&stateCode=" + stateTerm + "&api_key=" + apiKey;
console.log(queryURL);


var parkName = "";
var parkDescription = "";
var parkLatLon = "";
var parkURL = "";

$.ajax({
    url: queryURL,
    method: "GET"
}).then(function(response) {

    for (var i = 0; i < response.data.length; i++) {
      parkName = response.data[i].fullName; 
      $("#test-results").append("<li>" + parkName + "</li>");
    }
});

1 个答案:

答案 0 :(得分：0)

1。）为<select>标记提供一个ID，以便从下拉列表中获取值。

<select id="states" multiple>
    <option>.....</option>
    .
    .
    .
</select>

2。）为<button>标记提供一个ID，以处理点击事件。在addEventListener的帮助下将事件添加到按钮。

<button id="subBtn" class="btn waves-effect waves-light" type="submit" name="action">Submit
    <i class="material-icons right">send</i>
</button>

完整的工作代码：

HTML 

<div class="row">
    <div class="input-field col s12">
        <select id="states" multiple>
            <option value="" disabled unselected>Choose your state</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="DC">District Of Columbia</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NV">Nevada</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PA">Pennsylvania</option>
            <option value="PR">Puerto Rico</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
        </select>
        <label>Search</label>
        <button id="subBtn" class="btn waves-effect waves-light" type="submit" name="action">Submit
            <i class="material-icons right">send</i>
        </button>
    </div>
</div>

JavaScript 

document.getElementById('subBtn').addEventListener('click', function () {
    let states = document.getElementById('states');
    let options = states.options;    //To get all the options present in <select>
    let selectedStates = [];
    for (let i = 0; i < options.length; i++) {
        if (options[i].selected) {    //If option is selected then push it inside the array
            selectedStates.push(options[i].value);
        }
     }
     console.log(selectedStates);
     const apiKey = "kjVPCM3LEwQYZxkv4byFPo1TRCvJk61IAO9wwtyI";
     let searchTerm = "";

     //Loop through all the selected states to get the queryURL
     for (let i = 0; i < selectedStates.length; i++) {
         let stateTerm = selectedStates[i];
         var queryURL = "https://api.nps.gov/api/v1/parks?q=" + searchTerm + "&stateCode=" + stateTerm + "&api_key=" + apiKey;
         console.log(queryURL);

         $.ajax({
             url: queryURL,
             method: "GET"
         }).then(function (response) {
             console.log(response);
         });
     }
 });
相关问题
最新问题