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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...