Dashboards & Visualizations

Set multiselect with JavaScript

puet
Explorer

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.

Labels (1)
Tags (2)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

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

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@puet 

Can you please share your sample code and use case?

KV

0 Karma

puet
Explorer

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

Tags (1)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

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

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.

0 Karma
Get Updates on the Splunk Community!

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...

March Community Office Hours Security Series Uncovered!

Hello Splunk Community! In March, Splunk Community Office Hours spotlighted our fabulous Splunk Threat ...

Stay Connected: Your Guide to April Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars in April. This post ...