So I had always hoped to avoid the whole dojo universe. The JSAPI 4.x seems to more and more inoculate against the inner workings of whatever dojo its using. But now, I'm trying to build some custom WAB widgets and see myself having unscramble some of this dojo stuff. i got a 2-part question, and question subject refers to only part 2. Part 1 Robert Scheitlin, GISP had some advice suggesting to work with dojo attachments points, as in ... input data-dojo-attach-point = " myButton " type = " button " value = " Click Here " > so that in my code I could refer to this element in widget.html simply as this.myButton. But I'm still not sure when to use the above or - provided I have added id = 'myButton', use this; dom . byId ( "myButton" ) I see folks using them almost interchangeably through this forum and elsewhere. Are there some simple guiding principles? Part 2 Now for the Select. I'm making a call to a web service, ignoring geometry and just returning the feature's name. Then I populate a with that, which I have called: select id = ' results ' data-dojo-attach-point = ' results ' data-dojo-type = " dijit/form/Select " > select > The following code populates a bunch of entries (or 's) in that with records from the service. //Interate over features in featureset //find desired feature attribute's value { var c = document . createElement ( 'option' ) ; c . innerHTML = myAttributeValue ; c . value = i ; this . results . appendChild ( c ) ; // 'results' being my dojo attach point } Next, I would like to use the dijit's event listener to watch if one of those 's is selected. Again, ... on ( this . results , "change" , lang . hitch ( this , function ( evt ) { console . log ( this . results ) ; The above gets me a reference to the but no attempt - such as ".value",".displayValue", "_getDisplayedValueAttr()" or ".selected" has been successful in getting me the value that's selected, and I've scoured the Dojo site for info. I can iterate over this.results.options and check the attribute selected for each one, but is there a simpler way? Thanks.

Arne, * The proper way is always use dojo attach points in lieu of dom ids when building widgets. The only time you really see ids used is people unfamiliar with widget development or some just being lazy / in a hurry. * The question would be is your select an actual dijit/form/Select or it just being rendered as a html select. For it be an actual dijit/form/Select then you have to have dijit/form/Select in your define array and have sure you have dijit/_WidgetsInTemplateMixin also in your define array and the declare array of your widget.js. to get a dijit/form/Select value you use this . bufferUnits . get ( 'value' ) to add the options in code you use code like this: var options = [ ] ; var len = this . config . bufferDefaults . bufferUnits . bufferUnit . length ; for ( var i = 0 ; i len ; i ++ ) { var option = { value : this . config . bufferDefaults . bufferUnits . bufferUnit [ i ] . name , label : this . config . bufferDefaults . bufferUnits . bufferUnit [ i ] . label } ; options . push ( option ) ; if ( i === 0 ) { options [ i ] . selected = true ; } } this . bufferUnits . addOption ( options ) ;

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

How do I get the value of selected <option> in dojo/Form/select?

Arne_Gelfert

So I had always hoped to avoid the whole dojo universe. The JSAPI 4.x seems to more and more inoculate against the inner workings of whatever dojo its using. But now, I'm trying to build some custom WAB widgets and see myself having unscramble some of this dojo stuff. i got a 2-part question, and question subject refers to only part 2.

Part 1

Robert Scheitlin, GISP‌ had some advice suggesting to work with dojo attachments points, as in ...

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>input</SPAN> <SPAN class="attr-name token">data-dojo-attach-point</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>myButton<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>button<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">value</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>Click Here<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

so that in my code I could refer to this element in widget.html simply as this.myButton.

But I'm still not sure when to use the above or - provided I have added id = 'myButton', use this;

dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"myButton"</SPAN><SPAN class="punctuation token">)</SPAN>‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

I see folks using them almost interchangeably through this forum and elsewhere. Are there some simple guiding principles?

Part 2

Now for the Select. I'm making a call to a web service, ignoring geometry and just returning the feature's name. Then I populate a <select> with that, which I have called:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>select</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>results<SPAN class="punctuation token">'</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-attach-point</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">'</SPAN>results<SPAN class="punctuation token">'</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit/form/Select<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>select</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

The following code populates a bunch of entries (or <option>'s) in that <select> with records from the service.

<SPAN class="comment token">//Interate over features in featureset</SPAN>
<SPAN class="comment token">//find desired feature attribute's value</SPAN>
<SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> c <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>
c<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> myAttributeValue<SPAN class="punctuation token">;</SPAN>
c<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">=</SPAN> i<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>c<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>   <SPAN class="comment token">// 'results' being my dojo attach point</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>

Next, I would like to use the dijit's event listener to watch if one of those <options>'s is selected. Again, ...

<SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">,</SPAN><SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN>lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
    console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

The above gets me a reference to the <select> but no attempt - such as ".value",".displayValue", "_getDisplayedValueAttr()" or ".selected" has been successful in getting me the value that's selected, and I've scoured the Dojo site for info. I can iterate over this.results.options and check the attribute selected for each one, but is there a simpler way? Thanks.

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Arne,

The proper way is always use dojo attach points in lieu of dom ids when building widgets. The only time you really see ids used is people unfamiliar with widget development or some just being lazy / in a hurry.
The question would be is your select an actual dijit/form/Select or it just being rendered as a html select. For it be an actual dijit/form/Select then you have to have dijit/form/Select in your define array and have sure you have dijit/_WidgetsInTemplateMixin also in your define array and the declare array of your widget.js. to get a dijit/form/Select value you use

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>bufferUnits<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">get</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'value'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

to add the options in code you use code like this:

        <SPAN class="keyword token">var</SPAN> options <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> len <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>config<SPAN class="punctuation token">.</SPAN>bufferDefaults<SPAN class="punctuation token">.</SPAN>bufferUnits<SPAN class="punctuation token">.</SPAN>bufferUnit<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> len<SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">var</SPAN> option <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
            value<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>config<SPAN class="punctuation token">.</SPAN>bufferDefaults<SPAN class="punctuation token">.</SPAN>bufferUnits<SPAN class="punctuation token">.</SPAN>bufferUnit<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN>
            label<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>config<SPAN class="punctuation token">.</SPAN>bufferDefaults<SPAN class="punctuation token">.</SPAN>bufferUnits<SPAN class="punctuation token">.</SPAN>bufferUnit<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>label
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
          options<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>option<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>i <SPAN class="operator token">===</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            options<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>selected <SPAN class="operator 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="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>bufferUnits<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addOption</SPAN><SPAN class="punctuation token">(</SPAN>options<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>

All comments

RobertScheitlin__GISP

Arne,

The proper way is always use dojo attach points in lieu of dom ids when building widgets. The only time you really see ids used is people unfamiliar with widget development or some just being lazy / in a hurry.
The question would be is your select an actual dijit/form/Select or it just being rendered as a html select. For it be an actual dijit/form/Select then you have to have dijit/form/Select in your define array and have sure you have dijit/_WidgetsInTemplateMixin also in your define array and the declare array of your widget.js. to get a dijit/form/Select value you use

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>bufferUnits<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">get</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'value'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

to add the options in code you use code like this:

        <SPAN class="keyword token">var</SPAN> options <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> len <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>config<SPAN class="punctuation token">.</SPAN>bufferDefaults<SPAN class="punctuation token">.</SPAN>bufferUnits<SPAN class="punctuation token">.</SPAN>bufferUnit<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> len<SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">var</SPAN> option <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
            value<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>config<SPAN class="punctuation token">.</SPAN>bufferDefaults<SPAN class="punctuation token">.</SPAN>bufferUnits<SPAN class="punctuation token">.</SPAN>bufferUnit<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN>
            label<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>config<SPAN class="punctuation token">.</SPAN>bufferDefaults<SPAN class="punctuation token">.</SPAN>bufferUnits<SPAN class="punctuation token">.</SPAN>bufferUnit<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>label
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
          options<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>option<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>i <SPAN class="operator token">===</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            options<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>selected <SPAN class="operator 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="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>bufferUnits<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addOption</SPAN><SPAN class="punctuation token">(</SPAN>options<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>

kenbuja

The way I have my Selects set up is like this on the html page:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">data-dojo-attach-point</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>sourceLayerFieldSelect<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>esriCTDownloadTabTextbox<SPAN class="punctuation token">"</SPAN></SPAN>
  <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit/form/Select<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>required:true,trim:true,disabled:true<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

This Select is populated with fields from a feature layer using information stored in an array of field infos (availableCategoryFieldInfos). This code first empties the Select of previous fields, adds the fields, then sets the display to empty so it doesn't have a field already selected.

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>sourceLayerFieldSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeOption</SPAN><SPAN class="punctuation token">(</SPAN>
  <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>sourceLayerFieldSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getOptions</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

array<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>availableCategoryFieldInfos<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>fieldInfo<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">const</SPAN> option <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
    value<SPAN class="punctuation token">:</SPAN> fieldInfo<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN>
    label<SPAN class="punctuation token">:</SPAN> fieldInfo<SPAN class="punctuation token">.</SPAN>alias
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>sourceLayerFieldSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addOption</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="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>sourceLayerFieldSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">_setDisplay</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string 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>

I set up a listener for its change event like this:

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN>
  <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>sourceLayerFieldSelect<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_onPrioritizationFieldSelectChange<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>

And I get the selected option using this syntax:

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_priorityField <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>sourceLayerFieldSelect<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Arne_Gelfert

Thanks for sharing, Ken. At first glance, it looks very similar to what I had.

You have a <div> with a dojo-attach point. I had a <select>. If I drop mine for the div, I love my scrollbar.

I was setting up my options like this:

var c = document.createElement('option');
this.results.appendChild(c);

You used removeOption(), I had:

while (this.results.firstChild) {
    this.results.removeChild(this.results.firstChild);
 };

If I try

option = {value: myAttrVal,
          label: myAttr}
this.results.addOption(option);

I get

<SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">init.js:115 TypeError: this.results.addOption is not a function</SPAN>

if I keep my createElement/appendChild,instead of addOption, I end up with:

<SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">init.js:115 TypeError: this.results._setDisplay<SPAN style="color: #3d3d3d;"> </SPAN>is not a function</SPAN>

I'll take another look at Robert's to make sure I am working with a "real' dojo dijit. -- I have a stack of dojo books on my desk...I think I need to spend a week just reading them. haha.

Arne_Gelfert

The only reason I asked after having good success with the dojo-attach was because I keep coming across code snippets from you that use the dom,.byId - haha.
I do have "dijit/form/Select" in my defines. But I suspect, I'm not setting up the dijit correctly, i.e. not creating it programmatically like I should.

define(['dojo/_base/declare', 
      'jimu/BaseWidget',
      'dijit/_WidgetsInTemplateMixin',
      [...]
      "dojo/_base/lang",
      "dojo/on", 
      "dojo/dom",
      "dijit/form/Select"],
function(declare, 
      BaseWidget,
      _WidgetsInTemplateMixin,
      [...]
      lang,
      on,
      dom,
      Select)

RobertScheitlin__GISP

Hopefully those threads are JS API threads or I was just not wanting to try spend a lot of time explaining the ins and out of it (Like I said Lazy...).
So that all looks good, expect to you have

<SPAN class="keyword token">return</SPAN> <SPAN class="token function">declare</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>BaseWidget<SPAN class="punctuation token">,</SPAN> _WidgetsInTemplateMixin<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

kenbuja

Where do you lose your scrollbar? In the Select dijit itself? Or somewhere else?

Can you post your html?

Arne_Gelfert

Ken,

Here is my very stripped down HTML.

<input data-dojo-type="dojox/mobile/SearchBox" data-dojo-attach-point="siteSearch" type="search" placeHolder="Search">
<input data-dojo-attach-point="searchBtn" type="button" value="Search for this Wellsite ">
<select data-dojo-attach-point="results" class="text-box-scroll" data-dojo-type="dijit/form/MultiSelect"></select>

It is working fine until l make Robert's suggested change of adding _WidgetsInTemplateMixin to the declare. I suspect I'm still not setting my dojo elements up correctly and just adding that dojo-attach point is not sufficient. Time to read up on Dojo, I guess.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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