We Keep Coding

Hiding select option based on value that i choose - javascript

So i'm having a simple code like this
<div class="form-group form-material floating">
<select class="form-control" name="first" id="first">
<option value="opt1">First Option</option>
<option value="opt2">Second Option</option>
</select>
<label class="floating-label" for="inputStatus">Option</label>
</div>
and
<div class="form-group form-material floating">
<select class="form-control" name="second" id="second">
<option value="val1">First Value</option>
<option value="val2">Second Value</option>
<option value="val3">Third Value</option>
<option value="val4">Fourth Value</option>
</select>
<label class="floating-label" for="inputStatus">Option</label>
</div>
What I am trying to do is when i choose 'opt1' i want the other select only show 'val2, val3, val4' and if i choose 'opt2' i want the other select only show 'val1, val2, val4' .. how do i do that ?

$("#first").on('change', function(){
if(this.value == 'opt1')
{
$(".op3").removeClass("hidden");
$(".op1").addClass("hidden");
}
else if(this.value == 'opt2')
{
$(".op1").removeClass("hidden");
$(".op3").addClass("hidden");
}
});
.hidden{display:none !important;}
<div class="form-group form-material floating">
<select class="form-control" name="first" id="first">
<option value="opt1">First Option</option>
<option value="opt2">Second Option</option>
</select>
<label class="floating-label" for="inputStatus">Option</label>
</div>
<div class="form-group form-material floating">
<select class="form-control" name="second" id="second">
<option class="op1" value="val1">First Value</option>
<option value="val2">Second Value</option>
<option class="op3" value="val3">Third Value</option>
<option value="val4">Fourth Value</option>
</select>
<label class="floating-label" for="inputStatus">Option</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Related

When a user selects "Yes" for Menu1, I am trying to make Menu2 appear. When "Yes" is selected for Menu3, Menu4 should appear, etc. What am I missing or doing wrong? Thank you in advance!
$(function() {
$("#Menu2").hide();
$("#Menu3").hide();
$("#Menu4").hide();
$("#Menu5").hide();
$("#Menu6").hide();
$("#Menu1").change(function() {
if ($(this).val() == "Yes") {
$("#Menu2").show();
} else {
$("#Menu2").hide();
}
});
$("#Menu2").change(function() {
if ($(this).val() == "Yes") {
$("#Menu3").show();
} else {
$("#Menu3").hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="form-group col-md-4">
<label for="Menu1">Menu1</label>
<select class="form-control" name="name" id="Menu1">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="Menu2">
<label for="Menu2">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="dog">Yes</option>
<option value="cat">No</option>
</select>
</div>
<div class="form-group col-md-4" id="Menu2">
<label for="Menu2">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="dog">Yes</option>
<option value="cat">No</option>
</select>
</div>

The problem was in the naming and also in the structure of your jQuery
$(document).ready(function(){
$("#menu2").hide();
$("#menu3").hide();
});
$(document).on('change',"#select1", function () {
if ($(this).val() == "Yes") {
$("#menu2").show();
} else {
$("#menu2").hide();
}
});
$(document).on('change',"#select2", function () {
if ($(this).val() == "Yes") {
$("#menu3").show();
} else {
$("#menu3").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-4">
<label for="Menu1">Menu1</label>
<select class="form-control" name="name1" id="select1">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="menu2">
<label for="Menu2">Menu2</label>
<select class="form-control" name="name2" id="select2">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="menu3">
<label for="Menu2">Menu3</label>
<select class="form-control" name="name3" id="select3">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>

Your html and javascript both are wrong. you can not give same id for multiple controls. Here is an example
Live Demo
<div class="form-row">
<div class="form-group col-md-4">
<label for="Menu1">Menu1</label>
<select class="form-control" name="name" id="Menu1">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="divMenu2">
<label for="Menu2">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="divMenu3">
<label for="Menu2">Menu3</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() {
$("#divMenu2").hide();
$("#divMenu3").hide();
$("#Menu1").change(function() {
if ($(this).val() == "Yes") {
$("#divMenu2").show();
} else {
$("#divMenu2").hide();
}
});
$("#Menu2").change(function() {
if ($(this).val() == "Yes") {
$("#divMenu3").show();
} else {
$("#divMenu3").hide();
}
});
});

I got one more doubt I'm close to the answer but not getting it to worked. Actually I have the a default input text & default drop-down(drop-down which consist of west Bengal & others). Now if someone click's on the west Bengal state under drop-down then the default input should get hide and the west Bengal drop-down should get displayed.
Below is the code what I have tried. Can any one please guideme I'm a bit new to jQuery.
$(document).ready(function() {
$("#state").on("select", function() {
if ($(this).val() ===
"WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group
otherdistricts">
<input class="form-
control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-
control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>

'select' is not the jQuery event you are expecting. It is related to text selectiongs in text inputs and text areas.
You should use 'change' instead for when the value of the select field changes.
$(document).ready(function() {
$("#state").on("change", function() {
if ($(this).val() ===
"WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group
otherdistricts">
<input class="form-
control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-
control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>

$(document).ready(function() {
$(document).on("change","#state", function() {
if ($(this).val() ===
"WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}else{
$(".westbengaldistrict").hide();
$(".otherdistricts").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group
otherdistricts">
<input class="form-
control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-
control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>

I want to hide the corresponding textarea field of a dropdown, It will be used in a lot of instance that's why I want it on a function.
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1" ></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2" ></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3" ></textarea>
</div>
As you can see in the code the dropdown name=campaign-dd# has a specific textarea name=campaign-comment#.

On initial load. I want to hide it. And will display it once YES is selected
In this case you can put a common class on all the .field elements which contains the comment fields, in my example below I used .comment and hide them in CSS. Then in JS you can put a change event handler on the select elements which shows/hides the related comment field based on the selected option. Try this:
$('select').change(function() {
$(this).closest('.field').nextAll('.field:first').toggle($(this).val() == 'Yes');
});
.field.comment {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field comment">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1"></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field comment">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2"></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field comment">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3"></textarea>
</div>

Adding classes that makes more sense would be easier, but you can construct the name for the textarea from the name given to the select, to hide it etc.
$('.field select').on('change', function() {
var parts = this.name.split('-');
var numb = parts[1].replace(/\D/g, '');
$('[name="' + parts[0] + '-comment' + numb + '"]').toggle(this.value !== 'Yes')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<em>Select "Yes" to hide comment</em>
<br><br><br>
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1"></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2"></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3"></textarea>
</div>

I have these 3 dropdownlist. I want to show only 1 dropdownlist according to values selected in the first DDL. can someone help me with this :
HTML :
<div class="field">
<label for="message_for">Message For</label>
<select id="message_for" name="message_for" title="Message For" >
<option value='shop'>Shops</option>
<option value='offers'>Offers</option>
<option value='events'>Events</option>
<option value='consultancy'>Consultancy</option>
</select>
</div>
<div class="field1">
<label for="message_type">Message Type</label>
<select id="offer_type" name="offer_type" title="Offer Type" >
<option value='special'>Special</option>
<option value='recommend'>Recommended</option>
<option value='day'>Offer of the Day</option>
<option value='hot'>Hot Offer</option>
</select>
</div>
<div class="field2">
<label for="message_type">Message Type</label>
<select id="shop_type" name="shop_type" title="Shop Type" >
<option value='mall'>Mall</option>
<option value='warehouse'>Warehouse</option>
<option value='food'>Food</option>
<option value='banquet'>Banquet</option>
<option value='service'>Service</option>
<option value='cosmetics'>Cosmetics</option>
<option value='fashion'>Fashion</option>
</select>
</div>
<div class="field3">
<label for="message_type">Message Type</label>
<select id="event_type" name="event_type" title="Event Type" >
<option value='social'>Social</option>
<option value='other'>Other</option>
</select>
</div>
Means if i select shops in first DDL then the second DDL should be DIV field2

Basically, the idea is to get the value of message_for select using jquery and show or hide other selects based on its value.
$("#message_for").on("change", function(){
if($(this).val() == "shop"){
$(".field1").show();
}
//here add more cases to show relevant selects
});
I have created this jsfiddle for you - https://jsfiddle.net/guranjanpsingh/h9prdxyy/2/

The easiest way is to add classes to divs with the same name as option values in order to target them.
$('div:not(".general")').hide();
$('#message_for').on('change', function() {
$('div:not(".general")').hide();
$('.' + $(this).val()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="general">
<label for="message_for">Message For</label>
<select id="message_for" name="message_for" title="Message For">
<option value=''>Please Select</option>
<option value='shop'>Shops</option>
<option value='offers'>Offers</option>
<option value='events'>Events</option>
<option value='consultancy'>Consultancy</option>
</select>
</div>
<div class="shop">
<label for="message_type">Message Type</label>
<select id="offer_type" name="offer_type" title="Offer Type">
<option value='special'>Special</option>
<option value='recommend'>Recommended</option>
<option value='day'>Offer of the Day</option>
<option value='hot'>Hot Offer</option>
</select>
</div>
<div class="offers">
<label for="message_type">Message Type</label>
<select id="shop_type" name="shop_type" title="Shop Type">
<option value='mall'>Mall</option>
<option value='warehouse'>Warehouse</option>
<option value='food'>Food</option>
<option value='banquet'>Banquet</option>
<option value='service'>Service</option>
<option value='cosmetics'>Cosmetics</option>
<option value='fashion'>Fashion</option>
</select>
</div>
<div class="events">
<label for="message_type">Message Type</label>
<select id="event_type" name="event_type" title="Event Type">
<option value='social'>Social</option>
<option value='other'>Other</option>
</select>
</div>

here is my code ..i code a php page where i want, if we select scholarship status yes then some options show below like bank name , branch etc and if we select scholarship status no , then not show any option.
<div class="controls">
<select id="" name="Scholarship info">
<option value="">select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
and if we select yes then show that options otherwise if we select no ..not show below options....
<div class="controls">
<select id="" name="Bank name">
<option value="">select</option>
<option value="state bank">State bank</option>
<option value="Canera Bank">Canera bank</option>
</select>
</div>
<div class="controls">
<select id="" name="Branch name">
<option value="">select</option>
<option value="amethi">amethi</option>
<option value="lucknow">lucknow</option>
</select>
</div>
<div class="controls">
<select id="" name="account number">
<input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="<?php echo
set_value('accountnumber'); ?>" />
</div>

LIVE DEMO
$(document).ready(function() {
$("select[name='Bank name']").hide();
$("select[name='Branch name']").hide();
$("select[name='account number']").hide();
$("input[name='acoountnumber']").hide();
});
$("select[name='Scholarship info']").change(function() {
var selectedVal = $(this).val();
if(selectedVal == 'yes') {
$("select[name='Bank name']").show();
$("select[name='Branch name']").show();
$("select[name='account number']").show();
$("input[name='acoountnumber']").show();
} else {
$("select[name='Bank name']").hide();
$("select[name='Branch name']").hide();
$("select[name='account number']").hide();
$("input[name='acoountnumber']").hide();
}
});

If you add an extra class, withScholarship to the divs you want to show and hide, it is gets even easier. See this JSFiddle
<div class="controls">
<select id="" name="Scholarship info">
<option value="">select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
<div class="controls withScholarship">
<select id="" name="Bank name">
<option value="">select</option>
<option value="state bank">State bank</option>
<option value="Canera Bank">Canera bank</option>
</select>
</div>
<div class="controls withScholarship">
<select id="" name="Branch name">
<option value="">select</option>
<option value="amethi">amethi</option>
<option value="lucknow">lucknow</option>
</select>
</div>
<div class="controls withScholarship">
<input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="121"/>
</div>
<script type="text/javascript">
$(".withScholarship").hide();
$("select[name='Scholarship info']").change(function() {
var flag = $(this).val() == "yes";
$(".withScholarship").toggle(flag);
})
</script>