Dashboards & Visualizations

how to clear dropdown box?

eliasabouhamad
Explorer

hi,

how to clear dropdown box? . i have 2 dropdown box related i need to reset or clear the second one on the change off the first one.

regrads,
Elias

Tags (1)

niketn
Legend

@cssmdi, @eliasabouhamad

On change of value of the main dropdown, set both the depended dropdown token and its corresponding form token as well. Following is a run anywhere example:
The <change> event handler for Dropdown 1 updates both the token and form token for Dropdown2

      <change>
        <set token="form.tokDropdown2">$value$</set>
        <set token="tokDropdown2">$value$</set>
      </change>

Please try out and confirm!

<form>
  <label>Clear Dropdown 2 Selection On Change of Dropdown 1</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="tokDropdown1" searchWhenChanged="true">
      <label>Dropdown 1</label>
      <choice value="a">Alpha</choice>
      <choice value="b">Beta</choice>
      <choice value="c">Charlie</choice>
      <change>
        <set token="form.tokDropdown2">$value$</set>
        <set token="tokDropdown2">$value$</set>
      </change>
      <default>a</default>
    </input>
    <input type="dropdown" token="tokDropdown2" searchWhenChanged="true">
      <label>Dropdown 2</label>
      <choice value="a">Apple</choice>
      <choice value="b">Banana</choice>
      <choice value="c">Cucumber</choice>
      <default>a</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
        <div>Dropdown 1: $tokDropdown1$</div>
        <div>Dropdown 2: $tokDropdown2$</div>
      </html>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

cssmdi
Explorer

Hi niketnilay

Works like a charm. Thank you very much!!
I missed the <set token="form.tokDropdown2">value_to_set</set>
It is hard to find this form.tokenname in the documentation.

Kind regards
Matthias

0 Karma

niketn
Legend

@cssmdi I know that you have not posted the Question so you can not accept the answer. But do up vote the answer/comments that helped 🙂

Do try and get the Splunk Dashboard Examples App which has several everyday use case examples including those for Drilldown, Cascaded Dropdown and Tokens etc.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

cssmdi
Explorer

Hi
No chance to do this with simple XML and without HTML and JavaScript?
Regards
Matthias

0 Karma

torrentg
Engager

I solved a similar problem using this javascript:

require([
    'splunkjs/ready!',
    'splunkjs/mvc/textinputview',
    'splunkjs/mvc/dropdownview'
  ],
  function(mvc) {
    var input1 = mvc.Components.get('input1');
    var input2 = mvc.Components.get('input2');
    input1.on('change', function() {
      input2.val(undefined);
    });
});
0 Karma
Get Updates on the Splunk Community!

Detecting Remote Code Executions With the Splunk Threat Research Team

WATCH NOWRemote code execution (RCE) vulnerabilities pose a significant risk to organizations. If exploited, ...

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

The Splunk Community Dashboard Challenge is underway! This is your chance to showcase your skills in creating ...

.conf24 | Session Scheduler is Live!!

.conf24 is happening June 11 - 14 in Las Vegas, and we are thrilled to announce that the conference catalog ...