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)

niketnilay
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

niketnilay
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
*NEW* Splunk Love Promo!
Snag a $25 Visa Gift Card for Giving Your Review!

It's another Splunk Love Special! For a limited time, you can review one of our select Splunk products through Gartner Peer Insights and receive a $25 Visa gift card!

Review:





Or Learn More in Our Blog >>