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; } } }

Dynamically fill drop down list

AprilSummers

I am using this as an example to achieve what I want

ArcGIS API for JavaScript Sandbox

The code dynamically retrieves the list in the dropdown from the feature layer. How do I modify i so that I can dynamically retrieve values for the next dropdown based on the previous one. Basically, I want to retrieve values of another field using select by attribute and populate the next dropdown with the same.

I tried whatever I could but I could not get it to work.

Requesting for some pointers

Finde mehr Beiträge mit dem Tag

Accepted answers

rscheitlin

April,

In that case then when the user select an option from the first select element it has an event listener that calls the setWellsDefinitionExpression function. You need to take that SQL statement (i.e. "STATUS2 = '" + newValue + "'") and query the featurelayer.

<SPAN class="keyword token">var</SPAN> Select2 <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"the id of your second select"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">var</SPAN> query2 <SPAN class="operator token">=</SPAN> wellsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">//get the layer exisiting definitionExpression (the first dropdowns value)</SPAN>
query2<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> wellsLayer<SPAN class="punctuation token">.</SPAN>definitionExpression<SPAN class="punctuation token">;</SPAN>
wellsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>query2<SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getValues2<SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getUniqueValues<SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>addToSelect2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">addToSelect2</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  values<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sort</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  values<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">var</SPAN> option <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"option"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    option<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> value<SPAN class="punctuation token">;</SPAN>
    Select2<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>option<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

  <SPAN class="comment token">//return setWellsDefinitionExpression(Select2.value);</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<SPAN class="comment token">// return an array of all the values in the</SPAN>
<SPAN class="comment token">// your field</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">getValues2</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">var</SPAN> features <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> values <SPAN class="operator token">=</SPAN> features<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
   <SPAN class="keyword token">return</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>YOURSECONDFIELD<SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">return</SPAN> values<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

AprilSummers

Sorry for all the spam! It finally works exactly like I want!! I had a missing quote to end my string in the query function.

Thank you Robert Scheitlin, GISP‌!

AprilSummers

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Query features from a FeatureLayer - 4.14</title>

#infoDiv {
background-color: white;
color: black;
padding: 6px;
width: 400px;
}

#results {
font-weight: bolder;
padding-top: 10px;
}
.slider {
width: 100%;
height: 60px;
}
#drop-downs {
padding-bottom: 15px;
}
</style>

var wellTypeSelect = document.getElementById("well-type");
var wellTypeTwoSelect = document.getElementById("well-typetwo");

var queryWellsButton = document.getElementById("query-wells");

// oil and gas wells
var wellsLayer = new FeatureLayer({
portalItem: {
// autocasts as new PortalItem()
id: "8af8dc98e75049bda6811b0cdf9450ee"
},
outFields: ["*"],
visible: false
});

// GraphicsLayer for displaying results
var resultsLayer = new GraphicsLayer();

var map = new Map({
basemap: "dark-gray",
layers: [wellsLayer, resultsLayer]
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-97.75188, 37.23308],
zoom: 10
});
view.ui.add("infoDiv", "top-right");

// query all features from the wells layer
view
.when(function() {
return wellsLayer.when(function() {
console.log("map loads");
var query = wellsLayer.createQuery();
return wellsLayer.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect);

function getValues(response) {
var features = response.features;
var values = features.map(function(feature) {
return feature.attributes.STATUS2;
});
console.log("Get Well status values");
return values;
}

function getUniqueValues(values) {
console.log(start function);
var uniqueValues = [];

values.forEach(function(item, i) {
if ((uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) && item !== "") {
uniqueValues.push(item);
}
});
console.log("Get Well status unique values ");
return uniqueValues;
}

function addToSelect(values) {
values.sort();
values.forEach(function(value) {
var option = document.createElement("option");
option.text = value;
wellTypeSelect.add(option);
});
console.log("Add well status values to dropdown");
//return setWellsDefinitionExpression(wellTypeSelect.value);
}

function setWellsStatusExpression(newValue) {
wellsLayer.definitionExpression = "STATUS2 = '" + newValue + "'";

if (!wellsLayer.visible) {
wellsLayer.visible = true;
}
console.log(
"Sets definition expression only well status is available"
);
}

function setWellsDefinitionExpression(newValue1, newValue2) {
if ((newValue2 = undefined)) {
console.log("Only STATUS2 is available");
wellsLayer.definitionExpression = "STATUS2 = '" + newValue1 + "'";
} else {
console.log("Both status are available");
wellsLayer.definitionExpression =
"STATUS2 = '" + newValue1 + "AND STATUS = '" + newValue2 + "'";
}

if (!wellsLayer.visible) {
wellsLayer.visible = true;
}

return queryForWellGeometries();
}

function queryForWellGeometries() {
console.log("Query well geometries");
var wellsQuery = wellsLayer.createQuery();

return wellsLayer.queryFeatures(wellsQuery).then(function(response) {
wellsGeometries = response.features.map(function(feature) {
return feature.geometry;
});
return wellsGeometries;
});
}

wellTypeSelect.addEventListener("change", function() {
console.log("Change Well status values in dropdown");
var type = event.target.value;
setWellsStatusExpression(type);
filterWellType();
});

function filterWellType() {
console.log("Filter for well type");
var query2 = wellsLayer.createQuery();
query2.where = wellsLayer.definitionExpression;

wellsLayer
.queryFeatures(query2)
.then(getQuery2Values)
.then(getUniqueValues)
.then(addToSelectQuery2);
}

function getQuery2Values(response) {
var featuresQuery2 = response.features;
var query2Values = featuresQuery2.map(function(feature) {
return feature.attributes.STATUS;
});
console.log("Get Well type values");
return query2Values;
}

//Add the unique values to the STS Route type select element. This will allow the user to filter by campaigns.
function addToSelectQuery2(query2Values) {
query2Values.sort();
query2Values.forEach(function(value) {
var option = document.createElement("option");
option.text = value;
query2Values.add(option);
});
console.log("Add well type values to second dropdown");
}

//Set a new definitionExpression on the STS Route layer and view the selected campaign and run
wellTypeTwoSelect.addEventListener("change", function() {
console.log("Get Well status values");
var type = event.target.value;
});

queryWellsButton.addEventListener("click", function() {
var type = event.target.value;
setWellsDefinitionExpression(values.value, query2Values.value).then(
queryForWellGeometries
);
});
});
</script>
</head>

<body>
<div id="viewDiv"></div>
<div id="infoDiv" class="esri-widget">
<div id="drop-downs">
Select well status:
<select id="well-type" class="esri-widget"
><option value="">Select well status</option></select
>
Select well type:
<select id="well-typetwo" class="esri-widget"
><option value="">Select well type</option></select
>
</div>
<button id="query-wells" class="esri-widget">Query Wells</button>
<div id="results" class="esri-widget"></div>
</div>
</body>
</html>

AprilSummers

Hi Robert Scheitlin, GISP‌

Thank you very much! I adapted your script to get my code working the way I wanted. I am able to get the other drop-down to dynamically populate values. I need to tweak it a bit more because when I change the first dropdown, the second dropdown just appends the values to the second dropdown from the previous selection.

Having made this work (though not ideal way), when I run the QueryForWellsGeometries function (I want this as my final geometry return function and not the CreateBuffer()), I get an error that I am unable to understand how to decode. Any pointers?

I haven't changed anything in that function because when I run the create query, I assume that in considers the query using the SetDefinitionExpressionQuery where the definition expression is taking into consideration values of both dropdowns

rscheitlin

April,

<SPAN class="keyword token">var</SPAN> Select2 <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"the id of your second select"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">var</SPAN> query2 <SPAN class="operator token">=</SPAN> wellsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">//get the layer exisiting definitionExpression (the first dropdowns value)</SPAN>
query2<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> wellsLayer<SPAN class="punctuation token">.</SPAN>definitionExpression<SPAN class="punctuation token">;</SPAN>
wellsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>query2<SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getValues2<SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getUniqueValues<SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>addToSelect2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">addToSelect2</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  values<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sort</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  values<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">var</SPAN> option <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"option"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    option<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> value<SPAN class="punctuation token">;</SPAN>
    Select2<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>option<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

  <SPAN class="comment token">//return setWellsDefinitionExpression(Select2.value);</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<SPAN class="comment token">// return an array of all the values in the</SPAN>
<SPAN class="comment token">// your field</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">getValues2</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">var</SPAN> features <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> values <SPAN class="operator token">=</SPAN> features<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
   <SPAN class="keyword token">return</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>YOURSECONDFIELD<SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">return</SPAN> values<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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