Как получить несколько опций из выпадающего меню Materialise для автоматического запроса API? - PullRequest
Новая
       10

Как получить несколько опций из выпадающего меню Materialise для автоматического запроса API?

0 голосов
/ 09 января 2019

Я работаю над проектом, в котором пользователь может выбрать из списка состояний из выпадающего меню, которое я получил от Materialise, и цель состоит в том, чтобы затем запросить 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 голосов
/ 09 января 2019

1.) Присвойте идентификатор тегу <select>, чтобы получить значения из раскрывающегося списка. 

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

2.) Присвойте идентификатор тегу <button> для обработки события щелчка. Добавить событие в кнопку с помощью 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>

1020 * 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);
         });
     }
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...