How can I apply JavaScript on a multiselect dropdown menu?

[ajaylowes]

We have a multiselect dropdown with options "All, A , b, c , D"

Requirement: Whenever user selects "All" , then user cannot select any other option. If user selects anything else , then he can select multiple things.

My logic : Create a JavaScript which reads the value selected by the user and then if "All" is selected , then convert multiselect drop down to a normal dropdown . If anything else is selected , then let it be a multiselect dropdown .

Things I have tried:
1) Fetching value from dropdown to JavaScript using "splunkjs/mvc/textinputview" (var token_def = defaultTokenModel.get("token_name");)
2) If token_def = "all" , then render the view to normal dropdown . Else it remains to be multiselect dropdown.

Second thing I want to try is by using global flag. Setting it to value 1 when "All" is selected and "0" for others , then passing it to HTML.

Please advise. Please provide me doc related to JavaScript if available since I am new in this.
Thanks in Advance!!!

[ajaylowes · Accepted solution]

Hi ,

I was able to resolve this by taking reference from both answers provided above . Here is the script which worked for me:
require([
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function($, mvc){
$('#multi').on("change",function(){
var multi1 = mvc.Components.get("multi");
var tokens = mvc.Components.getInstance("default");
var mytoken = tokens.get("multi")
var indexOfAll = mytoken.indexOf("All");
if (mytoken.length > 1 && mytoken.includes("All"))
{
// If "All" was selected before current (more specific) selection, remove it from list
if (indexOfAll == 0)
{
var temp = mytoken.split(" ")
var temp1 = temp[1]
multi1.val(temp1);
} else
{
// "All" was selected last, clear input and leave only "All" in it
multi1.val("All");
}
}

  }); 
  });

[jeffland]

Converting the input doesn't sound like a nice UI to me. I would simply replace the value "All" with a more specific one if the user selects it, and replace any specific selection with "All". See this example:

<form script="multiselectChanges.js">
  <label>_temp js multiselect one value</label>
  <fieldset submitButton="false">
    <input id="multi" type="multiselect" token="multi">
      <label>Multi</label>
      <choice value="All">All</choice>
      <choice value="a">a</choice>
      <choice value="b">b</choice>
      <choice value="c">c</choice>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <search>
          <query>| makeresults | eval info="Your selection: $multi$"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

Javascript:

define([
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(mvc) {
    // Get multiselect
    var multi = mvc.Components.get("multi");
    // On change, check selection
    multi.on("change", (selectedValues) => {
        // Check if input has more than one value and if "All" is in it
        var indexOfAll = selectedValues.indexOf("All");
        if (selectedValues.length > 1 && selectedValues.includes("All")) {
            // If "All" was selected before current (more specific) selection, remove it from list
            if (indexOfAll == 0) {
                selectedValues.splice(indexOfAll, 1);
                multi.val(selectedValues);
            } else {
                // "All" was selected last, clear input and leave only "All" in it
                multi.val("All");
            }
        }
    });
});

[biju_babu]

Is there a way to add the java script in xml inline. I am using cloud version and don't have rights to add the script in path.

[ajaylowes]

Tried this but i am afraid that it didn't work.
I am still able to select all the values at a time

[ashish9433]

This can be helpful Splunk Answers

[jeffland]

Of course you can.

Requirement: Whenever user selects "All" , then user cannot select any other option. If user selects anything else , then he can select multiple things.

You're in the "anything else"-branch there. Have you tried selecting "All" after previously selecting a few other items? It removes the other items. And if you select any other item after "All" was selected, "All" disappears again. This basically means you can never select "All" and any other option at the same time, which is a nicer solution than disabling any other selection while "All" is selected (that would require an additional click to first remove "All" from the selection before the user can select a more specific option).

[DataOrg]

@jeffland
i am using below on the multiselect but its not working for me.

 <input type="multiselect" token="SERVERNAME" id="multi" searchWhenChanged="false">
        <label>Select </label>
        <search>
          <query>| inputlookup | sort Servers</query>
        </search>
         <fieldForLabel>Servers</fieldForLabel>
        <fieldForValue>host</fieldForValue>
        <delimiter>,</delimiter>
        <choice value="All">$VAL$</choice>
      </input>

[jeffland]

I don't know what you're trying to do and how. Please open a new question, and provide more details there.