Dashboards & Visualizations

How to create a dropdown based on the checkbox?

marisstella
Explorer

I need three dropdowns which should be shown based on the check box.. If there is no check box choosen, the dropdown should be hidden..
Like
checkbox1 dropdown1
checkbox2 dropdown2
checkbox3 dropdown3
when I click on the checkbox1 then only the dropdown1 should showup and fetch the result based on my search query.

0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@marisstella

Can you please try this?

<form>
  <label>Checkbox</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="checkbox">
      <label>Checkbox 1</label>
      <choice value="Checkbox1">Checkbox1</choice>
      <delimiter> </delimiter>
      <change>
        <condition match="$checkbox$==&quot;Checkbox1&quot;">
          <set token="flag1">true</set>
        </condition>
        <condition>
          <unset token="flag1"></unset>
          <unset token="dropdown1"></unset>
        </condition>
      </change>
    </input>
    <input type="checkbox" token="checkbox2">
      <label>Checkbox 2</label>
      <choice value="Checkbox2">Checkbox2</choice>
      <delimiter> </delimiter>
      <change>
        <condition match="$checkbox2$==&quot;Checkbox2&quot;">
          <set token="flag2">true</set>
        </condition>
        <condition>
          <unset token="flag2"></unset>
          <unset token="dropdown2"></unset>
        </condition>
      </change>
    </input>
    <input type="checkbox" token="checkbox3">
      <label>Checkbox 1</label>
      <choice value="Checkbox3">Checkbox3</choice>
      <delimiter> </delimiter>
      <change>
        <condition match="$checkbox3$==&quot;Checkbox3&quot;">
          <set token="flag3">true</set>
        </condition>
        <condition>
          <unset token="flag3"></unset>
          <unset token="dropdown3"></unset>
        </condition>
      </change>
    </input>
    <input type="dropdown" token="dropdown1" depends="$flag1$">
      <label>DropDown 1</label>
      <choice value="A">A</choice>
    </input>
    <input type="dropdown" token="dropdown2" depends="$flag2$">
      <label>DropDown 2</label>
      <choice value="A">A</choice>
    </input>
    <input type="dropdown" token="dropdown3" depends="$flag3$">
      <label>DropDown 3</label>
      <choice value="A">A</choice>
    </input>
  </fieldset>
</form>

View solution in original post

0 Karma

vnravikumar
Champion

Hi

Try this

<form script="checkbox.js">
  <label>Checkbox</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="chkvalue" id="rk">
      <label>Checkbox</label>
      <choice value="one">One</choice>
      <choice value="two">Two</choice>
      <choice value="three">Three</choice>
      <delimiter>,</delimiter>
    </input>
    <input type="dropdown" token="dropdown1" depends="$form.showdp1$">
      <label>DropDown 1</label>
      <choice value="dp1">DP1</choice>
    </input>
    <input type="dropdown" token="dropdown2" depends="$form.showdp2$">
      <label>DropDown 2</label>
       <choice value="dp2">DP2</choice>
    </input>
    <input type="dropdown" token="dropdown3" depends="$form.showdp3$">
      <label>DropDown 3</label>
       <choice value="dp3">DP3</choice>
    </input>
    <input type="text" token="showdp1" depends="$hide$"></input>
    <input type="text" token="showdp2" depends="$hide$"></input>
    <input type="text" token="showdp3" depends="$hide$"></input>
  </fieldset>
</form>

javascript:

require([
    "jquery", 
    "splunkjs/mvc", 
    "splunkjs/mvc/simplexml/ready!"], function($, mvc) {
        var checkbox = mvc.Components.get('rk');
        checkbox.on("change", function(e) {
            var defaultTokenModel = mvc.Components.get("default");
            var tokenValue = defaultTokenModel.get("chkvalue");
            defaultTokenModel.unset("form.showdp1");
            defaultTokenModel.unset("form.showdp2");
            defaultTokenModel.unset("form.showdp3");
            if(tokenValue != null && tokenValue.length > 0){
                tokenValue.split(",").forEach(function (item) {
                if(item === "one"){
                    defaultTokenModel.set("form.showdp1",true);
                }else if(item === "two"){
                    defaultTokenModel.set("form.showdp2",true);
                }else if(item === "three"){
                    defaultTokenModel.set("form.showdp3",true);
                }
            });
        }
    });
});
0 Karma

marisstella
Explorer

@ravikumar, this is good idea but I don't know how to execute this.. that's why accepted above answer. Don't mind.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@marisstella

Can you please try this?

<form>
  <label>Checkbox</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="checkbox">
      <label>Checkbox 1</label>
      <choice value="Checkbox1">Checkbox1</choice>
      <delimiter> </delimiter>
      <change>
        <condition match="$checkbox$==&quot;Checkbox1&quot;">
          <set token="flag1">true</set>
        </condition>
        <condition>
          <unset token="flag1"></unset>
          <unset token="dropdown1"></unset>
        </condition>
      </change>
    </input>
    <input type="checkbox" token="checkbox2">
      <label>Checkbox 2</label>
      <choice value="Checkbox2">Checkbox2</choice>
      <delimiter> </delimiter>
      <change>
        <condition match="$checkbox2$==&quot;Checkbox2&quot;">
          <set token="flag2">true</set>
        </condition>
        <condition>
          <unset token="flag2"></unset>
          <unset token="dropdown2"></unset>
        </condition>
      </change>
    </input>
    <input type="checkbox" token="checkbox3">
      <label>Checkbox 1</label>
      <choice value="Checkbox3">Checkbox3</choice>
      <delimiter> </delimiter>
      <change>
        <condition match="$checkbox3$==&quot;Checkbox3&quot;">
          <set token="flag3">true</set>
        </condition>
        <condition>
          <unset token="flag3"></unset>
          <unset token="dropdown3"></unset>
        </condition>
      </change>
    </input>
    <input type="dropdown" token="dropdown1" depends="$flag1$">
      <label>DropDown 1</label>
      <choice value="A">A</choice>
    </input>
    <input type="dropdown" token="dropdown2" depends="$flag2$">
      <label>DropDown 2</label>
      <choice value="A">A</choice>
    </input>
    <input type="dropdown" token="dropdown3" depends="$flag3$">
      <label>DropDown 3</label>
      <choice value="A">A</choice>
    </input>
  </fieldset>
</form>
0 Karma

manjunathmeti
SplunkTrust
SplunkTrust

Instead of using match you can use value attribute in condition element.

<form>
  <fieldset submitButton="false">
  <input type="checkbox" token="checkbox">
      <label>Checkbox</label>
      <choice value="Checkbox">checkbox</choice>
      <change>
        <condition value="Checkbox">
          <set token="flag">true</set>
        </condition>
        <condition>
          <unset token="flag"></unset>
        </condition>
      </change>
    </input>
    <input type="dropdown" token="dropdown" depends="$flag$">
      <label>DropDown</label>
      <choice value="A">A</choice>
    </input>
  </fieldset>
 </form>
0 Karma

marisstella
Explorer

Awesome... I made some changes as per my requirement. Appreciate it. Thanks for the help Kamlesh and Manjunath

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...