topic Re: Set multiselect with JavaScript in Dashboards & Visualizations

Set multiselect with JavaScript

puet — Wed, 06 Oct 2021 13:27:38 GMT

I know how to set Values.

multiselect.val(value_array);

BUT:
Is there a way to set the labels to a different value (not the actual value)?
For Example: i want to be able to select the country by its name but in the search i use the country code.

Something like:
multiselect.label(lable_array);

or:
multiselect.val(value_array , label_array);

I tried an array with label-value pairs but it did not work.

Re: Set multiselect with JavaScript

kamlesh_vaghela — Sat, 09 Oct 2021 16:54:08 GMT

@puet

Can you please share your sample code and use case?

Re: Set multiselect with JavaScript

puet — Mon, 11 Oct 2021 06:43:08 GMT

I realized I can just use initial values.

But for more context:
I have a lookup :

Code	Country
AT	Austria
AU	Australia

I need the Country column for display and the Code as value, because our other data uses only the code.

What i wanted to do is setting the multiselect to the 3 countries most relevant to us via JavaScript and i completely forgot i can just set the Initial value in xml

Re: Set multiselect with JavaScript

kamlesh_vaghela — Mon, 11 Oct 2021 08:53:58 GMT

@puet

You can try below JS code to set multiselect input get selected with some values.

XML (Common for both js)

<form script="a.js" theme="light"> <label>Abcd</label> <fieldset submitButton="false"> <input type="multiselect" token="tkn_country" id="tkn_country"> <label>Country</label> <fieldForLabel>Country</fieldForLabel> <fieldForValue>Code</fieldForValue> <search id="tkn_country_search"> <query>| makeresults | eval _raw="Code Country AT Austria AU Australia"| multikv forceheader=1|table Code Country</query> <earliest>-24h@h</earliest> <latest>now</latest> </search> </input> </fieldset> </form>

1) Select by value.

require([ 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/simplexml/ready!' ], function($, mvc) { var multi = mvc.Components.getInstance("tkn_country"); // your multiselect id here var defaultValues = ["AT", "AU"]; multi.val(defaultValues) });

2) Select by label.

require([ 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/simplexml/ready!' ], function($, mvc) { var multi = mvc.Components.getInstance("tkn_country"); var tkn_country_search = mvc.Components.getInstance("tkn_country_search"); // your multiselect id here var defaultValues = ["Austria", "Australia"]; tkn_country_search.on("search:done", function() { var myResults = tkn_country_search.data("results"); // get the data from that search myResults.on("data", function() { resultArray = myResults.data().rows; val = []; $.each(resultArray, function(index, value) { if (jQuery.inArray(value[1], defaultValues) !== -1) { val.push(value[0]) } }) multi.val(val) }) }) });

I hope both example will help you.

Thanks
KV
▄︻̷̿┻̿═━一 😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

Re: Set multiselect with JavaScript

puet — Tue, 12 Oct 2021 10:50:36 GMT

Thanks!

I was missing the part where i get the value by its' Label.

$.each(resultArray, function(index, value) { if (jQuery.inArray(value[1], defaultValues) !== -1) { val.push(value[0]) } })

Works fine now.