nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to toggle queryTask URL based on selected item in drop down menu?

MatthewBaker2

Hi all,

How would I construct a queryTask URL so that it pointed to a different layer based on the selected item of a drop down?

I have 2 years worth of data I'd like to query based on the selected year in a drop down.

The URL would basically be switched to

http://arcgisserverurl/service/{layer1}

http://arcgisserverurl/service/{layer2}

A typical drop down menu has a label and a value... I can set the label to be the Year, and the value to be 0, 1 or whatever the corresponding layer is in the service.

Hope that makes sense!

Thanks!

-m

Vind meer berichten getagd met

Accepted answers

ManishkumarPatel

Hi Matthew,

You got all the logic pretty right on track.

You can change the queryTask.url on the change event of the dropdown or on some click of a button.

for example:

var queryTaskURLstring = "http://arcgisserverurl/service/";

on the dropdown change get the value and append that to the queryTaskURLstring

queryTaskURLstring = queryTaskURLstring + dropdownValue;

provide the required parameters and execute the query.

For more info on querytask please refer to the following link:
https://developers.arcgis.com/javascript/jsapi/querytask-amd.html

Hope this helps.

Regards,
Manish

All comments

ManishkumarPatel

Glad to help 🙂

MatthewBaker2

Thanks for the guidance, Manish! This seems to have worked:

<script>
  var serviceURL = "http://arcgisdev01:6080/arcgis/rest/services/Schools_Shared/MapServer/";

  var queryURL;

  //trigger function on load
  //showAlert();

  function getQueryURL() {
   var layerNum = document.getElementById("selectedYear").options[selectedYear.selectedIndex].value;

   queryURL = serviceURL + layerNum;

   //showAlert(serviceURL);

   //fill in text boxes to check my code
   document.getElementById("currentYear").value = layerNum;
   document.getElementById("fullURL").value = queryURL;

  }

  function showAlert() {
   alert(queryURL);

  }

 </script>

 <body>

  <select id="selectedYear" onchange="getQueryURL()">
   <option value="1">Current Year</option>
   <option value="0">Projected Year</option>

  </select>

  
  <input type="text" id="currentYear" size="5">
  <input type="text" id="fullURL" size="60">
  <input type="button"  value="Show URL" onclick="showAlert()">
 </body>

ManishkumarPatel

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.