monzay

Populating a combo box based on the value from a select list

Discussion created by monzay on Nov 8, 2011
Latest reply on Nov 8, 2011 by monzay
I'm trying to populate a combo box based on a select list. I'm using a combination of examples from the samples page. My query is valid as I have tested it against the layer in the services directory and using an alert I can see that it is passing the correct syntax. I get no FireFox errors but the combo box is not getting populated.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>State Info</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5">
</script>
<script type="text/javascript">var dojoConfig = { parseOnLoad:true };</script>
    <script type="text/javascript">
      dojo.require("esri.tasks.query");
      dojo.require("dojo.parser");
      dojo.require("dijit.form.ComboBox");
      dojo.require("dojo.data.ItemFileReadStore");

 var query, queryTask;

function init() {
    //create map and add layer
    map = new esri.Map("mapDiv");
    var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");
    map.addLayer(layer);

    //initialize query task
    queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");

    //initialize query
    query = new esri.tasks.Query();
    query.returnGeometry = false;
    query.outFields = ["SUB_REGION", "STATE_NAME"];

  }

  function executeQueryTask(subr) {
   //alert(subr);
   //set query based on what user typed in for population;
    query.where = "SUB_REGION = '"+ subr +"'";
 //alert(query.where);
    //execute query
    queryTask.execute(query,populateList);
  }

  function populateList(results) {
    
        //Populate the dropdown list box with unique values
        var zone;
        var values = [];
        var testVals={};
    
        values.push({name:"ALL"});
        
        var features = results.features;
        dojo.forEach (features, function(feature) {
          zone = feature.attributes.STATE_NAME;
          if (!testVals[zone]) {
            testVals[zone] = true;
            values.push({name:zone});
            
          }
        });
  
        //Create a ItemFileReadStore and use it for the ComboBox's data source
        var dataItems = { 
               identifier: 'name',
               label: 'name', 
               items: values
        };
        var store = new dojo.data.ItemFileReadStore({data:dataItems});
        dijit.byId("mySelect").store = store;
      }
   
  dojo.addOnLoad(init);
</script>
  <body class="tundra">
    <br/>
    US city population greater than : 
    

 <select name="subregion" id="subregion" onChange="executeQueryTask(dojo.byId('subregion').value);">
  <option value="Pacific">Pacific Region</option>
  <option value="Mtn">Mountain Region</option>
  <option value="S Atl">South Atlantic Region</option>
 </select>
 
 <select id="mySelect" 
             dojotype="dijit.form.ComboBox"
             style="width:300px;font-size:18px;"
             autoComplete="true"
             forceValidOption="false"
             value="Select Zoning Type">
 </select>

    <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>


  </body>

</html>

Outcomes