Populate dropdown, specifying label and values coming from different attributes

[TracySchloss]

I have a layer of school districts that contains both the school district name and a district ID number.  I have a layer of schools which contains just the district ID number.

I'm populating my dijit.form.Select from the attributes of the school district layer.  I need the list to appear as district names, but at the same time, it would be nice if the values were the district IDs.  Then I could fire off a query on the school layer using a where clause without having to do any other hoop jumping (I think).  This code works to populate my dropdown, I'd just like it to be a little more functional. 

function populateDropDownList(){     var queryTask = new QueryTask(educationLayer.url + "/3");     var query = new Query();     query.outFields = ["DIST_NAME"];     query.where = "1=1";     query.returnGeometry = false;       queryTask.on('complete', resultsHandler);     queryTask.on('error', errorHandler);     queryTask.execute(query); }  function resultsHandler(results){     select = registry.byId("distSelect");// a dijit.form.Select      districtList.length = 0;     var numResults = results.featureSet.features.length;     for (var j = 0; j < numResults; j++) {         var distName = results.featureSet.features.attributes.DIST_NAME; //note the attribute name for the district code is DIST_CODE         districtList.push(distName);     }     districtList.sort();     var testList = arrayUtil.map(districtList, function (item, index){     return {         label:item,         value:item         };     });     select.addOption(testList); }

[JasonZou · Accepted solution]

Try this.

function populateDropDownList(){     var queryTask = new QueryTask(educationLayer.url + "/3");     var query = new Query();     query.outFields = ["DIST_NAME", "DIST_CODE"];    // assuming DIST_CODE is the field for district id     query.where = "1=1";     query.returnGeometry = false;       queryTask.on('complete', resultsHandler);     queryTask.on('error', errorHandler);     queryTask.execute(query); }  function resultsHandler(results){     select = registry.byId("distSelect");// a dijit.form.Select      districtList.length = 0;     var numResults = results.featureSet.features.length;     for (var j = 0; j < numResults; j++) {         var distName = results.featureSet.features.attributes.DIST_NAME;         var distID = results.featureSet.features.attributes.DIST_CODE;         districtList.push({label: distName, value: distID});     }     districtList.sort(function(item1, item2) {         var label1 = item1.label.toLowerCase(),       label2 = item2.label.toLowerCase();     return (label1 > label2) ? 1 : (label1 < label2) ? -1 : 0;     });     select.addOption(districtList); }

[TracySchloss]

That works great, thanks!  You even got the sort I needed.

[TracySchloss]

I'm using dijit/form/Select, thinking it would let the user enter a letter on the keyboard and jump to that position in the list.  Apparently I need FilteringSelect instead.  The problem is the syntax for populating the options is not the same at all between the two types of Select.  I don't see anywhere in the reference for filteringSelect how I can do this.

[GeorgeSimpson]

Populate your FilteringSelect with a dojo/store/Memory store.  Something like:

new FilteringSelect({ placeHolder: "Sort Results",
                        
      value: null,
      placeHolder: "Select a Value",
      store: new Memory({ data: results.featureSet.features, idProperty: "DIST_CODE" }),
      labelAttr: "DIST_NAME",
      searchAttr: "DIST_NAME"
});

[JasonZou]

For FilteringSelect working with data store, use Memory instead for simplicity. Here is the way to set its options with Memory store.

• Add "dojo/store/Memory" to the dependency list, and take Memory as the module alias.




var memStore = new Memory(districtList);
select.set("store", memStore);

[TracySchloss]

I know this must be the right path to follow, but so far it's not working.  I added the reference for Memory.  Most examples I find people are using the querytask to populate a grid.  But in this case I'm trying to populate the store of a FilteringSelect.  I don't know if I need to define my store or data differently because of that.  I know in some instances I need to have an identifier as part of my data definition.  But maybe that's for ItemFileReadStore and grids and doesn't apply in this situation. 

function resultsHandler(results){
    var select = registry.byId("distSelect");//my filteringSelect dijit
    districtList.length = 0;
    var numResults = results.featureSet.features.length;
    for (var j = 0; j < numResults; j++) {
        var distName = results.featureSet.features.attributes.DIST_NAME;
        var distCode = results.featureSet.features.attributes.DIST_CODE;
        districtList.push({label: distName, value: distCode});
    }
       districtList.sort(function(item1, item2) {
        var label1 = item1.label.toLowerCase(),
         label2 = item2.label.toLowerCase();
        
    return (label1 > label2) ? 1 : (label1 < label2) ? -1 : 0;
    });

   var dataStore = new Memory({data:districtList});
select.set ("store", dataStore);
 // select.addOption(districtList);

}

[GeorgeSimpson]

you need to set idProperty on your Store.

new Memory({data:districtList, idProperty:"DIST_CODE"})

[TracySchloss]

There are no values in my Select and when I click on it, I get an error TypeError: _f.store.query is not a function.  Could it be something different than idProperty?

[JasonZou]

George is right. Set idProperty to 'value' instead.

var dataStore = new Memory({data:districtList, idProperty:"value"});