Populate the combo box - Hi, i am new to the javascript development and am not able to populate the combobox in the following code , can some one please help

chaithraR_Gowda · ‎07-14-2014

<!DOCTYPE html>

<html>

<head>

<title>Feature Layer Only Map</title>

<style>

html,

body {

height: 100%;

width: 100%;

margin: 0;

}

body {

background-color: #FFF;

overflow: hidden;

font-family: "Trebuchet MS";

}

#header {

background-image: url(http://desktop101.ksrsac.com/KSRSAC/LefttPane/images/banner.jpg);

background-repeat: repeat-x;

border: solid 4px #224a54;

color: #FFF;

font-size: 18pt;

text-align: left;

font-weight: 700;

height: 70px;

margin: 2px;

}

#leftPane {

background-color: #FFF;

color: #3f3f3f;

border: solid 2px #224a54;

width: 20%;

margin: 5px;

padding: 2px;

}

#map {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

.dijitTabInnerDiv {

background-color: #ecefe4;

}

#tabs {

padding: 5px;

}

#HomeButton {

position: absolute;

top: 200px;

left: 280px;

z-index: 50;

}

</style>

dojoConfig = {

parseOnLoad: true

}

</script>

require([

"dojo/dom-construct",

"esri/map",

"esri/layers/FeatureLayer",

"esri/geometry/Extent",

"esri/InfoTemplate",

"esri/dijit/HomeButton",

"esri/dijit/OverviewMap",

"dojo/parser",

"dojo/store/Memory",

"dijit/form/ComboBox",

"esri/tasks/QueryTask",

"esri/tasks/Query",

"dijit/layout/BorderContainer",

"dijit/layout/TabContainer",

"dijit/layout/ContentPane",

"dojo/domReady!"

], function (

domConstruct,

Map,

FeatureLayer,

Extent,

InfoTemplate,

HomeButton,

OverviewMap,

parser,

Memory,

ComboBox

) {

parser.parse();

var bounds = new Extent({

"xmin": 7583508.66876001,

"ymin": 754519.306341084,

"xmax": 10843390.8045407,

"ymax": 4451565.92247309,

"spatialReference": {

"wkid": 3857

}

});

var map = new Map("map", {

extent: bounds

});

var url = "http://164.100.133.66/ArcGIS/rest/services/Basemap/StateBasemap/MapServer/6";

var template = new InfoTemplate("Tank Information System", "<tr>State Name: <td>${STATE}</tr></td><br><tr>Objectid:<td>${OBJECTID}</tr></td><br><tr>Shape length:<td>${Shape_Length}</tr></td><br><tr>Shape Area:<td>${Shape_Area}sq Meters</tr></td>");

var fl = new FeatureLayer(url, {

id: "6",outFields: ["*"],

infoTemplate: template

});

//var overviewMapDijit = new OverviewMap({ map: map, visible: true});

var home = new HomeButton({

map: map

}, "HomeButton");

//QUERY TASK FOR DROP DOWN

function init() {

queryTask = new esri.tasks.QueryTask("http://164.100.133.66/ArcGIS/rest/services/Basemap/StateBasemap/MapServer/6");

var query = new Query();

query = new esri.tasks.Query();

query.returnGeometry = false;

query.outFields = ["STATE"];

query.where = "STATE<> ''";

queryTask.execute(query, populateList);

}

function populateList(results) {

//Populate the ComboBox with unique values

var zone;

var values = [];

var testVals = {};

//Add option to display all zoning types to the ComboBox

values.push({name: "ALL"

})

//Loop through the QueryTask results and populate an array

//with the unique values

var features = results.features;

dojo.forEach(features, function (feature) {

zone = feature.attributes.STATE;

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 Memory({data: dataItems});

dijit.byId("mySelect").store = store;

}

map.addLayer(fl);

//overviewMapDijit.startup();

home.startup();

init.startup();

dojo.addOnLoad(init);

});

</script>

</head>

<div id="title">"Tank Information System"

</div>

Content for the first tab

</div>

Content for the second tab

<select id="mySelect" dojoType="ComboBox" style="width:200px;font-size:16px;"

autoComplete="true"

forceValidOption="false"

value="Select Zoning Type"

onchange="applyLayerDef(this)" >

</select>

</div>

</span>

</div>

</div>

</body>

</html>

JeffPace · ‎07-14-2014

First, once you past in code, please use the advanced editor, choose the double arrow, and use syntax highlighting to format as javascript

second, as an example

  <select data-dojo-type="dijit/form/FilteringSelect" id="printOrientation" style="width:140px;">
                                    <option value="p" selected>Portrait</option>
                                    <option value="l">Landscape</option>
  </select> Orientation<br>

JeffPace · ‎07-15-2014

did this help?

chaithraR_Gowda · ‎07-18-2014

No , I Want to Populate the attribute values to the combo box and when user selects any one of the listed values it should get zoomed to that polygon.

JeffPace · ‎07-18-2014

then you can attach an onchange event to the box . In my example

registry.byId("printOrientation").onChange=function(){

//do your zoom to feature

};