I want to populate my dropdown with attributes of shapefile for example in one dropdown on loading name of states given then after selecting the specific state next drop down loads its counties and also on every select map zoom to that level.

<!DOCTYPE html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">      
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Cost Estimation</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    html, body, #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
  <script src="https://js.arcgis.com/3.20/"></script>
    var map;
      'esri/map',  'dojo/dom', 'dojo/dom-construct', 'dojo/parser',"esri/layers/FeatureLayer", 'dijit/form/DropDownButton',
      'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', "esri/dijit/Scalebar",'dojo/domReady!'
    ], function(Map, dom, domConst, parser,FeatureLayer,DropDownButton,
    InfoTemplate,Scalebar) {

    map = new Map("map", {
      basemap: "hybrid",
      center: [73.998500, 31.079219],//Longitude and Latitude
      zoom: 13

    var scale = new Scalebar({
        map: map,
        scalebarUnit: "english"

    // Add feature layers 
    var info = new InfoTemplate();

    // Boundary
    var boundary_C = new FeatureLayer("/MapServer/3"); //Boundary layer
    //Compartments Layer
    var compartments_C = new FeatureLayer("/MapServer/5" , {
      infoTemplate: info,
      // info = {title :" Details"};
      outFields: ["Spicie","SHAPE_Area"]
    var colony_C = new FeatureLayer("/MapServer/4" , {
      infoTemplate: info,
      // info = {title :"Details"};
      outFields: ["Remarks"]
    var poi = new FeatureLayer("/MapServer/0" , {
      infoTemplate: info,
      // info = {title :" Details"};
      outFields: ["Name"]

    map.addLayers([boundary_C ,compartments_C,colony_C,poi]);   
    var compart_drp = new DropDownButton({
              label :"Select from option"
              var district_drp = new DropDownButton({
              label :"Select from option"
<body class="claro">
  <div id="content"
       data-dojo-props="design:'headline', gutters:false"
       style="width: 100%; height: 100%">
        <div id="header" 
           style="background-color: darkseagreen; border:solid thin silver">
           <span style="color:darkolivegreen;font-size:15px "><center><h2>District INFORMATION PORTAL</h2></center></span>
        <div id="details" 
             data-dojo-props="region:'left', splitter:false"
             style="overflow:auto; width:250px; background-color: lightgray ;border:solid thin white">
             Select Area from the List
            <div id = "dropDownButtonContainer"></div>
        <div id="map" 

I have added dropbox in the left panel now I want to populate my drop box with the feature layer attributes. I have explained earlier about the action.

  • Which version of the ArcGIS API for JavaScript are you using? For questions that involve code we ask that you show us where you are stuck with your own code by including a code snippet in your question. There is an edit button beneath your question which will enable you to do that and a {} button that enables you to format any highlighted code nicely. – PolyGeo Apr 17 '17 at 9:04
  • One problem off the bat is that the function arguments don't agree with the require modules order. The scalebar module has to come after the InfoTemplate module. – kenbuja Apr 17 '17 at 12:49
  • ok thanks i will do it . but kindly guide me in my said problem – Sarah Salar Apr 18 '17 at 4:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.