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
Champion

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
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!

Introduction to Splunk AI

How are you using AI in Splunk? Whether you see AI as a threat or opportunity, AI is here to stay. Lucky for ...

Splunk + ThousandEyes: Correlate frontend, app, and network data to troubleshoot ...

Are you tired of troubleshooting delays caused by siloed frontend, application, and network data? We've got a ...

Maximizing the Value of Splunk ES 8.x

Splunk Enterprise Security (ES) continues to be a leader in the Gartner Magic Quadrant, reflecting its pivotal ...