user7047368 user7047368 - 1 month ago 10
jQuery Question

Hiding particular divs on selecting dropdown values in codeigniter

Selecting dropdown value unable to hide particular divs.Hereis my code.

View:

<script>
function showRequiredOption(cval)
{
if(cval=='interstate')
{
$('#cgst').hide();
$('#sgst').hide();

}
elseif(cval=='exemptedsales')
{
$('#cgst').hide();
$('#sgst').hide();
$('#igst').hide();

}
else
{
$('#igst').hide();
$('#cgst').show();
$('#sgst').show();

}
}
</script>
<div class="col-md-9 col-md-offset-2">
<div id="legend">
<legend class="">Profile Information</legend>
</div>
<form role="form" action="<?php echo site_url();?>invoice/addinvoice" method="post" class="form-horizontal" id="location" method="post" accept-charset="utf-8">
<div class="form-group">
<label class="control-label col-sm-2 " for="user">User</label>
<div class="col-sm-4 col-sm-offset-1">
<select id="user" name="user" onchange="showRequiredOption(this.value);">
<option value="employee">Local Sales</option>
<option value="interstate">Inter state</option>
<option value="freelancer">Stock transfers</option>
<option value="exemptedsales">Exempted Sales</option>
<option value="company">Zero Rated Sales</option>
<option value="freelancer">Job Work</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 " for="hsn">Freight Charges</label>
<div class="col-sm-4 col-sm-offset-1">
<input type="text" class="form-control" id="hsn" placeholder="Enter HSN Number" >
</div>
</div>

<div class="form-group" id="igst">
<label class="control-label col-sm-2 " for="hsn">IGST 18%</label>
<div class="col-sm-4 col-sm-offset-1">
<input type="text" class="form-control" id="hsn" placeholder="Enter HSN Number" >
</div>
</div>
<div class="form-group" id="sgst">
<label class="control-label col-sm-2 " for="hsn">SGST 9%</label>
<div class="col-sm-4 col-sm-offset-1">
<input type="text" class="form-control" id="sgst" placeholder="Enter HSN Number" >
</div>
</div>
<div class="form-group" id="cgst">
<label class="control-label col-sm-2 " for="hsn">CGST 9%</label>
<div class="col-sm-4 col-sm-offset-1">
<input type="text" class="form-control" id="cgst" placeholder="Enter HSN Number" >
</div>
</div>
<button id="submit" type="submit" class="btn" name="submit">Submit</button>
</form>
</div>


Here if i select interstate,Stock Transfers in dropdown cgst,sgst should be hided and igst should be displayed.

If i select Exempted sales,Zero Rated sales,Job Work in dropdown IGST,CGST,SGST should be hided.

By default It should show sgst and cgst

Answer

Apply the space between else if

Conditions: select interstat or Stock Transfers cgst,sgst should be hided and igst should be displayed.

select Exempted sales,Zero Rated sales,Job Work in dropdown IGST,CGST,SGST should be hided.

function showRequiredOption(cval)
{    
 
    switch(cval){
    case "interstate":
    case "freelancer":
        $('#cgst').hide();
        $('#sgst').hide();
         $('#igst').show();
break;
 case "exemptedsales":
 case "company":
 case "jobwork":
        $('#cgst').hide();
        $('#sgst').hide();
        $('#igst').hide();
break;
default:
    
        $('#igst').hide();
        $('#cgst').show();
        $('#sgst').show();

    }
}
 $('#igst').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-9 col-md-offset-2">
<div id="legend">
    <legend class="">Profile Information</legend>
</div>  
<form role="form" action="<?php echo site_url();?>invoice/addinvoice" method="post" class="form-horizontal" id="location" method="post" accept-charset="utf-8">     
    <div class="form-group">
        <label class="control-label col-sm-2 " for="user">User</label> 
        <div class="col-sm-4 col-sm-offset-1">
            <select id="user" name="user" onchange="showRequiredOption(this.value)">
                <option value="employee">Local Sales</option>
                <option value="interstate">Inter state</option>
                <option value="freelancer">Stock transfers</option>
                <option value="exemptedsales">Exempted Sales</option>
                <option value="company">Zero Rated Sales</option>
                <option value="jobwork">Job Work</option>
            </select>
        </div>
    </div>      
    <div class="form-group">
      <label class="control-label col-sm-2 " for="hsn">Freight Charges</label>
      <div class="col-sm-4 col-sm-offset-1">
        <input type="text" class="form-control" id="hsn" placeholder="Enter HSN Number"  >
      </div>
    </div>

    <div class="form-group" id="igst">
      <label class="control-label col-sm-2 " for="hsn">IGST 18%</label>
      <div class="col-sm-4 col-sm-offset-1">
        <input type="text" class="form-control" id="hsn" placeholder="Enter HSN Number"  >
      </div>
    </div>  
     <div class="form-group" id="sgst">
      <label class="control-label col-sm-2 " for="hsn">SGST 9%</label>
      <div class="col-sm-4 col-sm-offset-1">
        <input type="text" class="form-control" id="sgst" placeholder="Enter HSN Number"  >
      </div>
    </div>  
    <div class="form-group" id="cgst">
      <label class="control-label col-sm-2 " for="hsn">CGST 9%</label>
      <div class="col-sm-4 col-sm-offset-1">
        <input type="text" class="form-control" id="cgst" placeholder="Enter HSN Number"  >
      </div>
    </div>          
  <button id="submit" type="submit" class="btn" name="submit">Submit</button>
 </form>
</div>