How to create a dropdown based on the checkbox?

[marisstella]

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.

[vnravikumar]

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);
                }
            });
        }
    });
});

[marisstella]

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

[kamlesh_vaghela · Accepted solution]

@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>

[manjunathmeti]

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>

[marisstella]

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