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!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...