Set multiselect with JavaScript

[puet]

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.

[kamlesh_vaghela]

@puet 

Can you please share your sample code and use case?

KV

[puet]

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

[kamlesh_vaghela · Accepted solution]

@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.

[puet]

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.