How do I add "Select One" to the top of the drop-down such as this? Right now the first choice is the first value in the table when sorted ascending (i.e. Appliance Recycling). Also, something's wrong because even though it shows "Appliance Recycling" ALL the features are in fact on the map. There are actually only 16 "Appliance Recycling" categories. I'm not sure if this is related to the table or something in the code. Current Code ! DOCTYPE html > html > head > meta charset = "utf-8" / > meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" / > title > Recycling Map / title > link rel = "stylesheet" href = "https://js.arcgis.com/4.15/esri/themes/light/main.css" / > script src = "https://js.arcgis.com/4.15/" > / script > style > html , body , #viewDiv { height : 100 % ; width : 100 % ; margin : 0 ; padding : 0 ; } #viewDiv { position : absolute ; height : calc ( 100 % - 67px ) ; top : 67px ; } #filterDiv { position : relative ; background - color : white ; color : black ; padding : 6px ; top : 0 ; background : #d4e1c0 ; border - bottom : 1px dotted #91dca1 ; } #category , #keyword { margin - top : 8px ; margin - bottom : 8px ; display : inline - block ; } . drop - downs { width : 100 % ; } . oneline { display : inline - block ; margin - right : 6px ; } #filterBtn { position : fixed ; right : 6px ; top : 6px ; width : 50px ; font : bold 12px Trebuchet MS ; color : #fff ; background - color : # 098941 ; border : 1px solid #1c9c52 ; text - decoration : none ; cursor : pointer ; padding : 2px 4px ; } #filterBtn : hover { background - color : #098dd1 ; border : 1px solid #0ab0ed ; } . docking - control { position : absolute ; z - index : 10 ; top : 50 % ; left : 50 % ; width : 250px ; height : 80px ; padding : 10px ; box - sizing : border - box ; margin : - 40px 0 0 - 125px ; background - color : #fff ; color : # 323232 ; text - align : center ; - webkit - box - shadow : 0 1px 2px rgba ( 0 , 0 , 0 , 0.3 ) ; box - shadow : 0 1px 2px rgba ( 0 , 0 , 0 , 0.3 ) ; } . docking - control label { display : inline - block ; font - weight : bold ; margin : 0 0 10px 0 ; padding : 0 ; font - size : 16px ; } #titleDiv { padding : 10px ; } #titleText { color : # 098941 ; font - size : 20pt ; font - weight : 500 ; padding - bottom : 10px ; } / style > script > require ( [ "esri/Map" , "esri/views/MapView" , "esri/layers/FeatureLayer" , "esri/layers/GraphicsLayer" , "esri/geometry/geometryEngine" , "esri/Graphic" ] , function ( Map , MapView , FeatureLayer , GraphicsLayer , geometryEngine , Graphic , ) { var catTypeSelect = document . getElementById ( "category" ) ; var keyTypeSelect = document . getElementById ( "keyword" ) ; var filterButton = document . getElementById ( "filterBtn" ) ; var resRb = document . getElementById ( "ResidentialRB" ) ; //***popups*** //popup template var template = { //autocasts the new template title : " {USER_Name} " , content : [ { //set content elements in the order to display type : "fields" , fieldInfos : [ { fieldName : "USER_Addre" , label : "Address" , visible : true , } , { fieldName : "USER_City" , label : "City" , visible : true , } , { fieldName : "USER_Phone" , label : " Phone" , visible : true , } , { fieldName : "USER_Email" , label : "Email" , visible : true , } , { fieldName : "USER_Notes" , label : "Notes" , visible : true , } , ] } , { // You can also set a descriptive text element type : "text" , // TextContentElement text : " {Description} " } ] , } ; // Recycle var recycleLayer = new FeatureLayer ( { portalItem : { // autocasts as new PortalItem() id : "227061be60a14cc89946a978b440d227" } , popupTemplate : template , outFields : [ "*" ] , visible : false } ) ; // GraphicsLayer for displaying results var resultsLayer = new GraphicsLayer ( ) ; var map = new Map ( { basemap : "dark-gray" , layers : [ recycleLayer , resultsLayer ] } ) ; var view = new MapView ( { container : "viewDiv" , map : map , center : [ - 87.95 , 41.47 ] , zoom : 10 , //popup popup : { } } ) ; popup = view . popup ; // query all features from the recycle layer view . when ( function ( ) { return recycleLayer . when ( function ( ) { var query = recycleLayer . createQuery ( ) ; return recycleLayer . queryFeatures ( query ) ; } ) ; } ) . then ( getValues ) . then ( getUniqueValues ) . then ( addToSelect ) // return an array of all the values in the // Category and USER_Keywo fields of the Recycle layer function getValues ( response ) { var features = response . features ; var values = features . map ( function ( feature ) { return { Category : feature . attributes . Category , USER_Keywo : feature . attributes . USER_Keywo } } ) ; return values ; } // return an array of unique values in // the USER_Keywo and Category fields of the Recycle layer function getUniqueValues ( values ) { var uniqueKeyValues = [ ] ; var uniqueCatValues = [ ] ; values . forEach ( function ( item , i ) { var keyVal = item . USER_Keywo . split ( ";" ) ; var catVal = item . Category . split ( ";" ) ; catVal . map ( function ( val1 ) { if ( ( uniqueCatValues . length 1 || uniqueCatValues . indexOf ( val1 ) === - 1 ) && val1 !== "" ) { uniqueCatValues . push ( val1 ) ; } } ) ; keyVal . map ( function ( val2 ) { if ( ( uniqueKeyValues . length 1 || uniqueKeyValues . indexOf ( val2 ) === - 1 ) && val2 !== "" ) { uniqueKeyValues . push ( val2 ) ; } } ) ; } ) ; return { uKeyVals : uniqueKeyValues , uCatVals : uniqueCatValues } ; } // Add the unique values to the recycle type // select element. This will allow the user // to filter categories by type. function addToSelect ( values ) { values . uCatVals . sort ( ) ; values . uCatVals . forEach ( function ( value ) { var option = document . createElement ( "option" ) ; option . text = value ; catTypeSelect . add ( option ) ; } ) ; values . uKeyVals . sort ( ) ; values . uKeyVals . forEach ( function ( value ) { var option = document . createElement ( "option" ) ; option . text = value ; keyTypeSelect . add ( option ) ; } ) ; return setDefinitionExpression ( ) ; } // set the definition expression on the recycle // layer to reflect the selection of the user function setDefinitionExpression ( ) { var sqlExp = "" ; if ( catTypeSelect . selectedIndex > 0 ) { sqlExp + = "Category LIKE '%" + catTypeSelect . options [ catTypeSelect . selectedIndex ] . value + "%'" ; } if ( keyTypeSelect . selectedIndex > 0 ) { if ( sqlExp === "" ) { sqlExp + = "USER_Keywo LIKE '%" + keyTypeSelect . options [ keyTypeSelect . selectedIndex ] . value + "%'" ; } else { sqlExp + = " AND USER_Keywo LIKE '%" + keyTypeSelect . options [ keyTypeSelect . selectedIndex ] . value + "%'" ; } } if ( resRb . checked ) { if ( sqlExp !== "" ) { sqlExp + = " AND USER_IsRes = 'TRUE'" ; } } else { if ( sqlExp !== "" ) { sqlExp + = " AND USER_IsBus = 'TRUE'" ; } } console . info ( sqlExp ) ; recycleLayer . definitionExpression = sqlExp ; if ( ! recycleLayer . visible ) { recycleLayer . visible = true ; } return queryForGeometries ( ) ; } // Get all the geometries of the recycle layer // the createQuery() method creates a query // object that respects the definitionExpression // of the layer function queryForGeometries ( ) { var rQuery = recycleLayer . createQuery ( ) ; return recycleLayer . queryFeatures ( rQuery ) . then ( function ( response ) { rGeometries = response . features . map ( function ( feature ) { return feature . geometry ; } ) ; return rGeometries ; } ) ; } filterButton . addEventListener ( "click" , function ( ) { setDefinitionExpression ( ) ; } ) ; view . ui . add ( "titleDiv" , "bottom-right" ) ; } ) ; / script > / head > body > div id = "viewDiv" > / div > div id = "filterDiv" > div class = "drop-downs" > div class = "oneline" > Select Category : / div > select id = "category" class = "oneline" > / select > div class = "oneline" > Select Keyword : / div > select id = "keyword" class = "oneline" > / select > div > input id = "ResidentialRB" name = "resorbus" type = "radio" value = "Residential" checked = "checked" > label for = "ResidentialRB" > Residential / label > input id = "BusinessRB" name = "resorbus" type = "radio" value = "Business" > label for = "BusinessRB" > Business / label > / div > button id = "filterBtn" > Search / button > / div > div id = "titleDiv" class = "esri-widget" > div id = "titleText" > Green Guide / div > div > Easy Ways To Be More Green / div > / div > / div > / body > / html >

Jared, function addToSelect ( values ) { var dOpt = document . createElement ( "option" ) ; dOpt . value = "" ; dOpt . diabled = true ; dOpt . selected = true ; dOpt . text = "Select one" ; catTypeSelect . add ( dOpt ) ; values . uCatVals . sort ( ) ; values . uCatVals . forEach ( function ( value ) { var option = document . createElement ( "option" ) ; option . text = value ; catTypeSelect . add ( option ) ; } ) ; var dOpt2 = document . createElement ( "option" ) ; dOpt2 . value = "" ; dOpt2 . diabled = true ; dOpt2 . selected = true ; dOpt2 . text = "Select one" ; keyTypeSelect . add ( dOpt2 ) ; values . uKeyVals . sort ( ) ; values . uKeyVals . forEach ( function ( value ) { var option = document . createElement ( "option" ) ; option . text = value ; keyTypeSelect . add ( option ) ; } ) ; return setDefinitionExpression ( ) ; }

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

Add Text to Top of Query Dropdown

jpilbeam

How do I add "Select One" to the top of the drop-down such as this?

Right now the first choice is the first value in the table when sorted ascending (i.e. Appliance Recycling). Also, something's wrong because even though it shows "Appliance Recycling" ALL the features are in fact on the map. There are actually only 16 "Appliance Recycling" categories. I'm not sure if this is related to the table or something in the code.

Current Code

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Recycling Map<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/esri/themes/light/main.css"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
        html<SPAN class="punctuation token">,</SPAN>
        body<SPAN class="punctuation token">,</SPAN>
        #viewDiv <SPAN class="punctuation token">{</SPAN>
            height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
            width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
            margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
            padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        #viewDiv <SPAN class="punctuation token">{</SPAN>
            position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
            height<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">calc</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN> <SPAN class="operator token">-</SPAN> 67px<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            top<SPAN class="punctuation token">:</SPAN> 67px<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        #filterDiv <SPAN class="punctuation token">{</SPAN>
            position<SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN>
            background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> white<SPAN class="punctuation token">;</SPAN>
            color<SPAN class="punctuation token">:</SPAN> black<SPAN class="punctuation token">;</SPAN>
            padding<SPAN class="punctuation token">:</SPAN> 6px<SPAN class="punctuation token">;</SPAN>
            top<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
            background<SPAN class="punctuation token">:</SPAN> #d4e1c0<SPAN class="punctuation token">;</SPAN>
            border<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN> 1px dotted #91dca1<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        #category<SPAN class="punctuation token">,</SPAN>
        #keyword <SPAN class="punctuation token">{</SPAN>
            margin<SPAN class="operator token">-</SPAN>top<SPAN class="punctuation token">:</SPAN> 8px<SPAN class="punctuation token">;</SPAN>
            margin<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN> 8px<SPAN class="punctuation token">;</SPAN>
            display<SPAN class="punctuation token">:</SPAN> inline<SPAN class="operator token">-</SPAN>block<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        <SPAN class="punctuation token">.</SPAN>drop<SPAN class="operator token">-</SPAN>downs <SPAN class="punctuation token">{</SPAN>
            width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        <SPAN class="punctuation token">.</SPAN>oneline <SPAN class="punctuation token">{</SPAN>
            display<SPAN class="punctuation token">:</SPAN> inline<SPAN class="operator token">-</SPAN>block<SPAN class="punctuation token">;</SPAN>
            margin<SPAN class="operator token">-</SPAN>right<SPAN class="punctuation token">:</SPAN> 6px<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        #filterBtn <SPAN class="punctuation token">{</SPAN>
            position<SPAN class="punctuation token">:</SPAN> fixed<SPAN class="punctuation token">;</SPAN>
            right<SPAN class="punctuation token">:</SPAN> 6px<SPAN class="punctuation token">;</SPAN>
            top<SPAN class="punctuation token">:</SPAN> 6px<SPAN class="punctuation token">;</SPAN>
            width<SPAN class="punctuation token">:</SPAN> 50px<SPAN class="punctuation token">;</SPAN>
            font<SPAN class="punctuation token">:</SPAN> bold 12px Trebuchet MS<SPAN class="punctuation token">;</SPAN>
            color<SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN>
            background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #<SPAN class="number token">098941</SPAN><SPAN class="punctuation token">;</SPAN>
            border<SPAN class="punctuation token">:</SPAN> 1px solid #1c9c52<SPAN class="punctuation token">;</SPAN>
            text<SPAN class="operator token">-</SPAN>decoration<SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
            cursor<SPAN class="punctuation token">:</SPAN> pointer<SPAN class="punctuation token">;</SPAN>
            padding<SPAN class="punctuation token">:</SPAN> 2px 4px<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

            #filterBtn<SPAN class="punctuation token">:</SPAN>hover <SPAN class="punctuation token">{</SPAN>
                background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #098dd1<SPAN class="punctuation token">;</SPAN>
                border<SPAN class="punctuation token">:</SPAN> 1px solid #0ab0ed<SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>

        <SPAN class="punctuation token">.</SPAN>docking<SPAN class="operator token">-</SPAN>control <SPAN class="punctuation token">{</SPAN>
            position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
            z<SPAN class="operator token">-</SPAN>index<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">;</SPAN>
            top<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">50</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
            left<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">50</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
            width<SPAN class="punctuation token">:</SPAN> 250px<SPAN class="punctuation token">;</SPAN>
            height<SPAN class="punctuation token">:</SPAN> 80px<SPAN class="punctuation token">;</SPAN>
            padding<SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN>
            box<SPAN class="operator token">-</SPAN>sizing<SPAN class="punctuation token">:</SPAN> border<SPAN class="operator token">-</SPAN>box<SPAN class="punctuation token">;</SPAN>
            margin<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN>40px <SPAN class="number token">0</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">-</SPAN>125px<SPAN class="punctuation token">;</SPAN>
            background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN>
            color<SPAN class="punctuation token">:</SPAN> #<SPAN class="number token">323232</SPAN><SPAN class="punctuation token">;</SPAN>
            text<SPAN class="operator token">-</SPAN>align<SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN>
            <SPAN class="operator token">-</SPAN>webkit<SPAN class="operator token">-</SPAN>box<SPAN class="operator token">-</SPAN>shadow<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> 1px 2px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.3</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            box<SPAN class="operator token">-</SPAN>shadow<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> 1px 2px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.3</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

            <SPAN class="punctuation token">.</SPAN>docking<SPAN class="operator token">-</SPAN>control label <SPAN class="punctuation token">{</SPAN>
                display<SPAN class="punctuation token">:</SPAN> inline<SPAN class="operator token">-</SPAN>block<SPAN class="punctuation token">;</SPAN>
                font<SPAN class="operator token">-</SPAN>weight<SPAN class="punctuation token">:</SPAN> bold<SPAN class="punctuation token">;</SPAN>
                margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="number token">0</SPAN> 10px <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
                padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
                font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN> 16px<SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>

        #titleDiv <SPAN class="punctuation token">{</SPAN>
            padding<SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        #titleText <SPAN class="punctuation token">{</SPAN>
            color<SPAN class="punctuation token">:</SPAN> #<SPAN class="number token">098941</SPAN><SPAN class="punctuation token">;</SPAN>
            font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN> 20pt<SPAN class="punctuation token">;</SPAN>
            font<SPAN class="operator token">-</SPAN>weight<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">500</SPAN><SPAN class="punctuation token">;</SPAN>
            padding<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
        <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
            <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"esri/geometry/geometryEngine"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"esri/Graphic"</SPAN>

        <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>
            Map<SPAN class="punctuation token">,</SPAN>
            MapView<SPAN class="punctuation token">,</SPAN>
            FeatureLayer<SPAN class="punctuation token">,</SPAN>
            GraphicsLayer<SPAN class="punctuation token">,</SPAN>
            geometryEngine<SPAN class="punctuation token">,</SPAN>
            Graphic<SPAN class="punctuation token">,</SPAN>
        <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>


            <SPAN class="keyword token">var</SPAN> catTypeSelect <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">"category"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> keyTypeSelect <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">"keyword"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> filterButton <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">"filterBtn"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> resRb <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">"ResidentialRB"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">//***popups***</SPAN>
            <SPAN class="comment token">//popup template</SPAN>
            <SPAN class="keyword token">var</SPAN> template <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//autocasts the new template</SPAN>
                title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<b>{USER_Name}</b>"</SPAN><SPAN class="punctuation token">,</SPAN>
                content<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
                    <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//set content elements in the order to display</SPAN>
                    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"fields"</SPAN><SPAN class="punctuation token">,</SPAN>
                    fieldInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
                        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"USER_Addre"</SPAN><SPAN class="punctuation token">,</SPAN>
                        label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Address"</SPAN><SPAN class="punctuation token">,</SPAN>
                        visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
                        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"USER_City"</SPAN><SPAN class="punctuation token">,</SPAN>
                        label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"City"</SPAN><SPAN class="punctuation token">,</SPAN>
                        visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"USER_Phone"</SPAN><SPAN class="punctuation token">,</SPAN>
                        label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">" Phone"</SPAN><SPAN class="punctuation token">,</SPAN>
                        visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"USER_Email"</SPAN><SPAN class="punctuation token">,</SPAN>
                        label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Email"</SPAN><SPAN class="punctuation token">,</SPAN>
                        visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"USER_Notes"</SPAN><SPAN class="punctuation token">,</SPAN>
                        label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Notes"</SPAN><SPAN class="punctuation token">,</SPAN>
                        visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><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="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN> 
                    <SPAN class="comment token">// You can also set a descriptive text element</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"text"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// TextContentElement</SPAN>
                        text<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<font color= '#098941'><b>{Description}</b>"</SPAN>
                    <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">// Recycle</SPAN>
            <SPAN class="keyword token">var</SPAN> recycleLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="comment token">// autocasts as new PortalItem()</SPAN>
                    id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"227061be60a14cc89946a978b440d227"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                popupTemplate<SPAN class="punctuation token">:</SPAN> template<SPAN class="punctuation token">,</SPAN>
                outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">// GraphicsLayer for displaying results</SPAN>
            <SPAN class="keyword token">var</SPAN> resultsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"dark-gray"</SPAN><SPAN class="punctuation token">,</SPAN>
                layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>recycleLayer<SPAN class="punctuation token">,</SPAN> resultsLayer<SPAN class="punctuation token">]</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
                map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
                center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">87.95</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">41.47</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">,</SPAN>
                <SPAN class="comment token">//popup</SPAN>
                popup<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="punctuation token">;</SPAN>
            popup <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">// query all features from the recycle layer</SPAN>
            view
                <SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">return</SPAN> recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="keyword token">var</SPAN> query <SPAN class="operator token">=</SPAN> recycleLayer<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="keyword token">return</SPAN> recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>query<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="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
                <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getValues<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>addToSelect<SPAN class="punctuation token">)</SPAN>

            <SPAN class="comment token">// return an array of all the values in the</SPAN>
            <SPAN class="comment token">// Category and USER_Keywo fields of the Recycle layer</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">getValues</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> <SPAN class="punctuation token">{</SPAN>
                        Category<SPAN class="punctuation token">:</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Category<SPAN class="punctuation token">,</SPAN>
                        USER_Keywo<SPAN class="punctuation token">:</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>USER_Keywo
                    <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="comment token">// return an array of unique values in</SPAN>
            <SPAN class="comment token">// the USER_Keywo and Category fields of the Recycle layer</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">getUniqueValues</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> uniqueKeyValues <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">var</SPAN> uniqueCatValues <SPAN class="operator token">=</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>item<SPAN class="punctuation token">,</SPAN> i<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">var</SPAN> keyVal <SPAN class="operator token">=</SPAN> item<SPAN class="punctuation token">.</SPAN>USER_Keywo<SPAN class="punctuation token">.</SPAN><SPAN class="token function">split</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">";"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="keyword token">var</SPAN> catVal <SPAN class="operator token">=</SPAN> item<SPAN class="punctuation token">.</SPAN>Category<SPAN class="punctuation token">.</SPAN><SPAN class="token function">split</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">";"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    catVal<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>val1<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>
                            <SPAN class="punctuation token">(</SPAN>uniqueCatValues<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token"><</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="operator token">||</SPAN> uniqueCatValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>val1<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">===</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&&</SPAN>
                            val1 <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN>
                        <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                            uniqueCatValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>val1<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="punctuation token">;</SPAN>
                    keyVal<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>val2<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>
                            <SPAN class="punctuation token">(</SPAN>uniqueKeyValues<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token"><</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="operator token">||</SPAN> uniqueKeyValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>val2<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">===</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&&</SPAN>
                            val2 <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN>
                        <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                            uniqueKeyValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>val2<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="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN>
                    uKeyVals<SPAN class="punctuation token">:</SPAN> uniqueKeyValues<SPAN class="punctuation token">,</SPAN>
                    uCatVals<SPAN class="punctuation token">:</SPAN> uniqueCatValues
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>

            <SPAN class="comment token">// Add the unique values to the recycle type</SPAN>
            <SPAN class="comment token">// select element. This will allow the user</SPAN>
            <SPAN class="comment token">// to filter categories by type.</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">addToSelect</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                values<SPAN class="punctuation token">.</SPAN>uCatVals<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>uCatVals<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>
                    catTypeSelect<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>

                values<SPAN class="punctuation token">.</SPAN>uKeyVals<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>uKeyVals<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>
                    keyTypeSelect<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="keyword token">return</SPAN> <SPAN class="token function">setDefinitionExpression</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">// set the definition expression on the recycle</SPAN>
            <SPAN class="comment token">// layer to reflect the selection of the user</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">setDefinitionExpression</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> sqlExp <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>catTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"Category LIKE '%"</SPAN> <SPAN class="operator token">+</SPAN> catTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>catTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN> <SPAN class="string token">"%'"</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>keyTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>sqlExp <SPAN class="operator token">===</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"USER_Keywo LIKE '%"</SPAN> <SPAN class="operator token">+</SPAN> keyTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>keyTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN> <SPAN class="string token">"%'"</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
                        sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">" AND USER_Keywo LIKE '%"</SPAN> <SPAN class="operator token">+</SPAN> keyTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>keyTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN> <SPAN class="string token">"%'"</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>resRb<SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>sqlExp <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">" AND USER_IsRes = 'TRUE'"</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>

                <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>sqlExp <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">" AND USER_IsBus = 'TRUE'"</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>sqlExp<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                recycleLayer<SPAN class="punctuation token">.</SPAN>definitionExpression <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">;</SPAN>

                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>recycleLayer<SPAN class="punctuation token">.</SPAN>visible<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    recycleLayer<SPAN class="punctuation token">.</SPAN>visible <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>

                <SPAN class="keyword token">return</SPAN> <SPAN class="token function">queryForGeometries</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">// Get all the geometries of the recycle layer</SPAN>
            <SPAN class="comment token">// the createQuery() method creates a query</SPAN>
            <SPAN class="comment token">// object that respects the definitionExpression</SPAN>
            <SPAN class="comment token">// of the layer</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">queryForGeometries</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> rQuery <SPAN class="operator token">=</SPAN> recycleLayer<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="keyword token">return</SPAN> recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>rQuery<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    rGeometries <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation 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>geometry<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> rGeometries<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>

            filterButton<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="token function">setDefinitionExpression</SPAN><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="punctuation token">;</SPAN>
            view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"titleDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bottom-right"</SPAN><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="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"filterDiv"</SPAN><SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"drop-downs"</SPAN><SPAN class="operator token">></SPAN>
            <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"oneline"</SPAN><SPAN class="operator token">></SPAN>Select Category<SPAN class="punctuation token">:</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
            <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"category"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"oneline"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<SPAN class="operator token">></SPAN>
            <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"oneline"</SPAN><SPAN class="operator token">></SPAN>Select Keyword<SPAN class="punctuation token">:</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
            <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"keyword"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"oneline"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<SPAN class="operator token">></SPAN>
            <SPAN class="operator token"><</SPAN>div<SPAN class="operator token">></SPAN>
                <SPAN class="operator token"><</SPAN>input id<SPAN class="operator token">=</SPAN><SPAN class="string token">"ResidentialRB"</SPAN> name<SPAN class="operator token">=</SPAN><SPAN class="string token">"resorbus"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"radio"</SPAN> value<SPAN class="operator token">=</SPAN><SPAN class="string token">"Residential"</SPAN> checked<SPAN class="operator token">=</SPAN><SPAN class="string token">"checked"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>label <SPAN class="keyword token">for</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"ResidentialRB"</SPAN><SPAN class="operator token">></SPAN>Residential<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<SPAN class="operator token">></SPAN>
                <SPAN class="operator token"><</SPAN>input id<SPAN class="operator token">=</SPAN><SPAN class="string token">"BusinessRB"</SPAN> name<SPAN class="operator token">=</SPAN><SPAN class="string token">"resorbus"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"radio"</SPAN> value<SPAN class="operator token">=</SPAN><SPAN class="string token">"Business"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>label <SPAN class="keyword token">for</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"BusinessRB"</SPAN><SPAN class="operator token">></SPAN>Business<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<SPAN class="operator token">></SPAN>
            <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
            <SPAN class="operator token"><</SPAN>button id<SPAN class="operator token">=</SPAN><SPAN class="string token">"filterBtn"</SPAN><SPAN class="operator token">></SPAN>Search<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"titleDiv"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN><SPAN class="operator token">></SPAN>
            <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"titleText"</SPAN><SPAN class="operator token">></SPAN>Green Guide<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
            <SPAN class="operator token"><</SPAN>div<SPAN class="operator token">></SPAN>Easy Ways To Be More Green<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator 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>‍</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><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>‍</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><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>‍</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><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>‍</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><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>‍</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><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>‍</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>

Encontre mais publicações marcadas com

Accepted answers

RobertScheitlin__GISP

Jared,

      <SPAN class="keyword token">function</SPAN> <SPAN class="token function">addToSelect</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> dOpt <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>
        dOpt<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt<SPAN class="punctuation token">.</SPAN>diabled <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt<SPAN class="punctuation token">.</SPAN>selected <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Select one"</SPAN><SPAN class="punctuation token">;</SPAN>
        catTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>dOpt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        values<SPAN class="punctuation token">.</SPAN>uCatVals<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>uCatVals<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>
          catTypeSelect<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="keyword token">var</SPAN> dOpt2 <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>
        dOpt2<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt2<SPAN class="punctuation token">.</SPAN>diabled <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt2<SPAN class="punctuation token">.</SPAN>selected <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt2<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Select one"</SPAN><SPAN class="punctuation token">;</SPAN>
        keyTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>dOpt2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        values<SPAN class="punctuation token">.</SPAN>uKeyVals<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>uKeyVals<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>
          keyTypeSelect<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="keyword token">return</SPAN> <SPAN class="token function">setDefinitionExpression</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><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>

All comments

RobertScheitlin__GISP

Jared,

      <SPAN class="keyword token">function</SPAN> <SPAN class="token function">addToSelect</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> dOpt <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>
        dOpt<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt<SPAN class="punctuation token">.</SPAN>diabled <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt<SPAN class="punctuation token">.</SPAN>selected <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Select one"</SPAN><SPAN class="punctuation token">;</SPAN>
        catTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>dOpt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        values<SPAN class="punctuation token">.</SPAN>uCatVals<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>uCatVals<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>
          catTypeSelect<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="keyword token">var</SPAN> dOpt2 <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>
        dOpt2<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt2<SPAN class="punctuation token">.</SPAN>diabled <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt2<SPAN class="punctuation token">.</SPAN>selected <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt2<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Select one"</SPAN><SPAN class="punctuation token">;</SPAN>
        keyTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>dOpt2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        values<SPAN class="punctuation token">.</SPAN>uKeyVals<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>uKeyVals<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>
          keyTypeSelect<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="keyword token">return</SPAN> <SPAN class="token function">setDefinitionExpression</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><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>

jpilbeam

Hi Robert,

Thanks for that. I implemented those changes and it does what I asked! But, is there a way to make the "Select one" selectable? Right now, the end-user can see it but can't click it.

RobertScheitlin__GISP

Why would you want them to be able to select it?... Just remove this line then:

dOpt<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN>disabled <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.5); border: 0px; font-weight: inherit; font-size: 14px;">=</SPAN> <SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit; font-size: 14px;">true</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">;</SPAN>

jpilbeam

Thanks Robert!

I need them to be able to select it because when a Category is selected it is supposed to filter the corresponding keyword(s). If "Select one" is not selectable I don't see how the user can sort of reset their search. Honestly, the app is not functioning correctly at the moment, so when it is I probably won't have to remove that line.

I've requested ESRI's help in the matter, but here's how it is supposed to (i.e. how I'd like it to) work: User selects Category --> Keyword(s) automatically get filtered leaving only those features in the map. All Categories have their corresponding keywords, for example Asbestos Info / Removal Service:

I'm basically lacking a function that filters a Categories' corresponding Keyword(s), I guess.

RobertScheitlin__GISP

Jared,

If that is the case then you have to re-query the layer based on the selected category and re-populate the keyword select.

      catTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> sqlExp <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>catTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"USER_Categ LIKE '%"</SPAN> <SPAN class="operator token">+</SPAN> catTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>catTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN> <SPAN class="string token">"%'"</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        <SPAN class="keyword token">var</SPAN> query <SPAN class="operator token">=</SPAN> recycleLayer<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>
        query<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">;</SPAN>
        recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>query<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>getUniqueValues2<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="punctuation token">)</SPAN><SPAN class="punctuation token">;</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>USER_Keywo
        <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="keyword token">function</SPAN> <SPAN class="token function">getUniqueValues2</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> uniqueKeyValues <SPAN class="operator token">=</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>item<SPAN class="punctuation token">,</SPAN> i<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">var</SPAN> keyVal <SPAN class="operator token">=</SPAN> item<SPAN class="punctuation token">.</SPAN><SPAN class="token function">split</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">";"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          keyVal<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>val2<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>
              <SPAN class="punctuation token">(</SPAN>uniqueKeyValues<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token"><</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="operator token">||</SPAN> uniqueKeyValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>val2<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">===</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&&</SPAN>
              val2 <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN>
            <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              uniqueKeyValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>val2<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="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">return</SPAN> uniqueKeyValues<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>
        <SPAN class="keyword token">while</SPAN> <SPAN class="punctuation token">(</SPAN>keyTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>                
          keyTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        <SPAN class="keyword token">var</SPAN> dOpt2 <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>
        dOpt2<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt2<SPAN class="punctuation token">.</SPAN>disabled <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt2<SPAN class="punctuation token">.</SPAN>selected <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt2<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Select one"</SPAN><SPAN class="punctuation token">;</SPAN>
        keyTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>dOpt2<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>
          keyTypeSelect<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="keyword token">return</SPAN> <SPAN class="keyword token">true</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>‍</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>

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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