So I was trying to create a regular dijit/form/MultiSelect but can't seem to get it to populate any values using JS. As I was looking for examples in other wigets I notice the query widget has a nice multi select drop down widget. This would fit my needs much better. Anyone have any knowledge on how to create this? If not I will keep trying to get my regular multiselect working. function ( response ) { let option ; let optionsArray = [ ] ; for ( let i = 0 ; i response . features . length ; i ++ ) { switch ( selectField ) { case "capCat" : option = { value : [ response . features [ i ] . attributes . CAT_No , response . features [ i ] . attributes . CAT_Begin_Dt , response . features [ i ] . attributes . CAT_End_Dt ] , label : response . features [ i ] . attributes . CAT_Full_Name } ; ; optionsArray . push ( option ) ; break ; case "capPeril" : option = { value : response . features [ i ] . attributes . COVERAGE , label : response . features [ i ] . attributes . COVERAGE } ; ; optionsArray . push ( option ) ; break ; } } //Use this if regular select if ( selectField == "capCat" ) { // Add a defualt option first let option1 = { value : "-" , label : "Select a " + title , selected : true } ; select . addOption ( option1 ) ; //Then add the rest of the options select . addOption ( optionsArray ) ; } else { //use this if multiselect //Attempt to load using store/Memory select . set ( "store" , new Memory ( { data : optionsArray , idProperty : "value" } ) ) ; select . set ( "labelAttr" , "label" ) ; console . log ( select ) ; }

Hello Brian I have been trying to use CheckedMultiSelect in my widget with no luck. Could you show me an example? I have issues importing the css, I suspect. Maybe there is a better way to implement a multiselect with a search box by now, but I have not been able to find it. Thank you, any help would be appreciated.

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 to create multi select dropdown

BrianLeroux

So I was trying to create a regular dijit/form/MultiSelect but can't seem to get it to populate any values using JS. As I was looking for examples in other wigets I notice the query widget has a nice multi select drop down widget. This would fit my needs much better. Anyone have any knowledge on how to create this?

If not I will keep trying to get my regular multiselect working.

<SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>			  
					<SPAN class="keyword token">let</SPAN> option<SPAN class="punctuation token">;</SPAN>
					<SPAN class="keyword token">let</SPAN> optionsArray <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
					
								
					
					<SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">let</SPAN> i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">.</SPAN>length<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">switch</SPAN> <SPAN class="punctuation token">(</SPAN>selectField<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
							<SPAN class="keyword token">case</SPAN> <SPAN class="string token">"capCat"</SPAN><SPAN class="punctuation token">:</SPAN>
								option <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>value<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>CAT_No<SPAN class="punctuation token">,</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>CAT_Begin_Dt<SPAN class="punctuation token">,</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>CAT_End_Dt<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>CAT_Full_Name<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="punctuation token">;</SPAN>
								optionsArray<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">break</SPAN><SPAN class="punctuation token">;</SPAN>
							<SPAN class="keyword token">case</SPAN> <SPAN class="string token">"capPeril"</SPAN><SPAN class="punctuation token">:</SPAN>
								option <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>value<SPAN class="punctuation token">:</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>COVERAGE<SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>COVERAGE<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="punctuation token">;</SPAN>
								optionsArray<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">break</SPAN><SPAN class="punctuation token">;</SPAN>
						<SPAN class="punctuation token">}</SPAN>
							
					<SPAN class="punctuation token">}</SPAN>
					<SPAN class="comment token">//Use this if regular select</SPAN>
					<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>selectField <SPAN class="operator token">==</SPAN> <SPAN class="string token">"capCat"</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
						<SPAN class="comment token">// Add a defualt option first</SPAN>
						<SPAN class="keyword token">let</SPAN> option1 <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> value<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"-"</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Select a "</SPAN> <SPAN class="operator token">+</SPAN> title<SPAN class="punctuation token">,</SPAN> selected<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
						select<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addOption</SPAN><SPAN class="punctuation token">(</SPAN>option1<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
						<SPAN class="comment token">//Then add the rest of the options</SPAN>
						select<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addOption</SPAN><SPAN class="punctuation token">(</SPAN>optionsArray<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="comment token">//use this if multiselect </SPAN>
					<SPAN class="comment token">//Attempt to load using store/Memory</SPAN>
					
					select<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"store"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Memory</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>data<SPAN class="punctuation token">:</SPAN> optionsArray<SPAN class="punctuation token">,</SPAN> idProperty<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"value"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
					select<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="string token">"labelAttr"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"label"</SPAN><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>select<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Encontre mais publicações marcadas com

Accepted answers

All comments

AnthonyAtkins2

Did you ever get this figured out? ESRI's tutorials are okay, but not having an example for every situation is kind of difficult. And going to Dojo's site/documentation isn't very helpful either.

MostafaGhanem

Hi Brian,

did you have any luck making the CheckedMultiSelect work. I am facing same issue. this my code below:

// Data

var dropList = [{id:1, value:”PMT”},{id:2,value:”DRW”},{id:2,value:”XYZ”}];

// Using memory to populate the list.

this.categoryMultiSelector.set('store', new Memory({

data: dropList

}));

this.categoryMultiSelector.set('value', this.dropList[0].value);

BrianLeroux

Oh well. I just switched to using dojox/form/CheckedMultiSelect instead. Everything works great with that.

RobertScheitlin__GISP

Nope no doc exists for that.

BrianLeroux

Hi Robert, Just back from vacation and catching up on this. I see what you are talking about. Any chance there is documentation on usage? I am not sure how well I will be able to figure things out. Thank you.

RobertScheitlin__GISP

Brain,

That is the jimu.js\dijit\_filter\AdvancedListValueProvider.js. You can see it being used in the ValueProviderFactory.js file.

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.