CODEWITHSUNDEEP
jqueryforms
P. Tzik
P. Tzik

Reputation: 143

Multiple Dependencies JQuery Form

$( document ).ready(function() {
    $("#c86").bind("change",function(){
		var selectedValue=$(this).val().toLowerCase();
		switch(selectedValue){
			case "bmattress": 
				$("#c92").show();			
				$("#c97").hide();
				$("#c103").hide();
				break;
			case "mattress":	
				$("#c92").hide();			
				$("#c97").show();
				$("#c103").hide();
				break;
			case "tmattress":	
				$("#c92").hide();			
				$("#c97").hide();
				$("#c103").show();
				break;
			case "-":	
				$("#c92").hide();			
				$("#c97").hide();
				$("#c103").hide();
				break;
			default:
				break;
		}
	});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<label class="control-label" for="c86">Main Choice</label>

<div class="input-group"><span class="input-group-addon left"><i class="fa fa-product-hunt"></i> </span>
<select class="form-control" onChange="displayForm(this)" id="c86" name="c86" data-rule-required="true">
  <option  value="-">- Select -</option>
  <option  value="bmattress">Bed</option>
  <option  value="mattress">Mat</option>
  <option  value="tmattress">Top</option>
  </select>
</div>

<div id="c92" class="form-group c92 " data-cid="c92" style="display: none">
  <label class="control-label" for="c92">First dropdown</label>

<div class="input-group"><span class="input-group-addon left"><i class="fa fa-check-circle"></i> </span>
<select class="form-control" name="c92"  
    >
  <option  value="">- Select -</option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  <option  value="4">4</option>
  <option  value="Other">Other</option>
  </select>
</div>
  
</div>




<div id="c97" class="form-group c97 "  style="display: none" data-cid="c97">
  <label class="control-label" for="c97">Second dropdown</label>

<div class="input-group"><span class="input-group-addon left"><i class="fa fa-circle-o"></i> </span>
<select class="form-control" name="c97"   
    >
  <option  value="">- Select -</option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  <option  value="4">4</option>
  <option  value="Other">Other</option>
  </select>
</div>
  
</div>




<div id="c103" class="form-group c103"  style="display: none" data-cid="c103">
  <label class="control-label" for="c103">Third dropdown</label>

<div class="input-group"><span class="input-group-addon left"><i class="fa fa-stop-circle"></i> </span>
<select class="form-control" name="c103"   
    >
  <option  value="">- Select -</option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  <option  value="4">4</option>
  <option  value="Other">Other</option>
  </select>
</div>
  
</div>

I have a dropdown with jquery which appears/hides other dropdown according to choices. It works OK but i want to have a fourth dropdown which appears when we select something on third dropdown. It seems that when i have id on root div it doesn't work does anybody knows how to fix this?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <script>
$( document ).ready(function() {
    $("#c86").bind("change",function(){
        var selectedValue=$(this).val().toLowerCase();
        switch(selectedValue){
            case "bmattress": 
                $("#c92").show();           
                $("#c97").hide();
                $("#c103").hide();
                break;
            case "mattress":    
                $("#c92").hide();           
                $("#c97").show();
                $("#c103").hide();
                break;
            case "tmattress":   
                $("#c92").hide();           
                $("#c97").hide();
                $("#c103").show();
                break;
            case "-":   
                $("#c92").hide();           
                $("#c97").hide();
                $("#c103").hide();
                break;
            default:
                break;
        }
    });
});
    </script>
</head>

<body>
<label class="control-label" for="c86">Main Choice</label>

<div class="input-group"><span class="input-group-addon left"><i class="fa fa-product-hunt"></i> </span>
<select class="form-control" onChange="displayForm(this)" id="c86" name="c86" data-rule-required="true">
  <option  value="-">- Select -</option>
  <option  value="bmattress">Bed</option>
  <option  value="mattress">Mat</option>
  <option  value="tmattress">Top</option>
  </select>
</div>

<div id="c92" class="form-group c92 " data-cid="c92" style="display: none">
  <label class="control-label" for="c92">First dropdown</label>

<div class="input-group"><span class="input-group-addon left"><i class="fa fa-check-circle"></i> </span>
<select class="form-control" name="c92"  
    >
  <option  value="">- Select -</option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  <option  value="4">4</option>
  <option  value="Other">Other</option>
  </select>
</div>

</div>




<div id="c97" class="form-group c97 "  style="display: none" data-cid="c97">
  <label class="control-label" for="c97">Second dropdown</label>

<div class="input-group"><span class="input-group-addon left"><i class="fa fa-circle-o"></i> </span>
<select class="form-control" name="c97"   
    >
  <option  value="">- Select -</option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  <option  value="4">4</option>
  <option  value="Other">Other</option>
  </select>
</div>

</div>




<div id="c103" class="form-group c103"  style="display: none" data-cid="c103">
  <label class="control-label" for="c103">Third dropdown</label>

<div class="input-group"><span class="input-group-addon left"><i class="fa fa-stop-circle"></i> </span>
<select class="form-control" name="c103"   
    >
  <option  value="">- Select -</option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  <option  value="4">4</option>
  <option  value="Other">Other</option>
  </select>
</div>

</div>
</body>
</html>

Upvotes: 1

Views: 305

Answers (1)

Alex Art.
Alex Art.

Reputation: 8781

Give your fourth dropdown an id and register a change event the same way that you did with the #c86. Assuming this is the 4th DropDown:

<div id="c104" class="form-group c104"  style="display: none" data-cid="c103">
  <label class="control-label" for="c103">Forth dropdown</label>

  <div class="input-group"><span class="input-group-addon left"><i class="fa fa-stop-circle"></i> </span>
  <select class="form-control" name="c104" id="c104_dd"    >
    <option  value="">- Select -</option>
    <option  value="1">1</option>
    <option  value="2">2</option>
    <option  value="3">3</option>
    <option  value="4">4</option>
    <option  value="Other">Other</option>
    </select>
  </div>

</div>

Give an id to the 3rd:

<select class="form-control" name="c103"   id="c103_dd"    >
  <option  value="">- Select -</option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  <option  value="4">4</option>
  <option  value="Other">Other</option>
  </select>
</div>

and create a change event handler

$("#c103_dd").change(function()
{
    var selectedValue=$(this).val().toLowerCase();
  if(selectedValue == 1)
  {
    $("#c104").show();
  }
})

Working fiddle

Upvotes: 1

Related Questions