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!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...