ng-required not working properly on select the value from dropdown - javascript

I have Date of birth drop down field,from that i selected the month,date and year values from dropdown.After selecting them as the error message showing previously it worked fine.
my code for that:
<div class="form-group form-inline">
<span for="">Birthday</span>
<div class="row panel-body">
<select name="month" id="month" class="custom-select col-xs-4" ng-model="dateOfBirth.month" onchange="call()" required >
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="day" id="day" class="custom-select col-xs-4" ng-model="dateOfBirth.day" onchange="call()" required>
<option value="">Day</option>
</select>
<select name="year" id="year" class="custom-select col-xs-4" ng-model="dateOfBirth.year" onchange="call()" required>
<option value="">Year</option>
</select>
</div>
<div ng-show="(frm.month.$touched || frm.day.$touched || frm.year.$touched)">
<span style="color:red" ng-show="((frm.month.$touched && frm.month.$error.required) || (frm.day.$touched && frm.day.$error.required) || (frm.year.$touched && frm.year.$error.required))">Date is required</span>
</div>
</div>
Error getting even if i select the values from the dropdown.

Related

Pass Province or State value to hidden field with Javascript

I am new to javascript and cannot find an easy-to-understand answer. I would like a certain value to get passed to a hidden field when a user selects a certain option from 2 different select dropdown options. They can only select one or the other on the actual form.
For example if a user selects a US state or a Canadian province, I want to pass that value to hidden text field using javascript.
<form>
<p class="form-field state pd-select required">
<label class="field-label" for="usstatevalue">State</label>
<select name="usstatevalue" id="usstatevalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47815">AL</option>
<option value="47817">AK</option>
<option value="47819">AZ</option>
<option value="47821">AR</option>
<option value="47823">CA</option>
<option value="47825">CO</option>
<option value="47827">CT</option>
<option value="47829">DE</option>
<option value="47831">DC</option>
<option value="47833">FL</option>
<option value="47835">GA</option>
<option value="47837">HI</option>
</select>
</p>
<p class="form-field Province_Canada pd-select required">
<label class="field-label" for="provcanvalue">Province – Canada</label>
<select name="provcanvalue" id="provcanvalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47791">Alberta</option>
<option value="47793">British Columbia</option>
<option value="47795">Manitoba</option>
<option value="47797">New Brunswick</option>
<option value="47799">Newfoundland and Labrador</option>
<option value="47801">Nova Scotia</option>
<option value="47803">Nunavut</option>
<option value="47805">Ontario</option>
<option value="47807">Prince Edward Island</option>
<option value="47809">Quebec</option>
<option value="47811">Saskatchewan</option>
<option value="47813">Yukon</option>
</select>
</p>
<p class="form-field State_Province">
<label for="stateprovnew">hidden field</label>
<input type="text" name="stateprovnew" value="">
</p>
</form>
Following code will insert the selected state and country into the text field. You can make the field hidden it will work.
var stateSelector = document.getElementById('usstatevalue');
var countrySelector = document.getElementById('provcanvalue');
var hiddenSelector = document.getElementById('stateprovnew');
stateSelector.addEventListener('change', function() {
hiddenSelector.value = stateSelector.value;
});
countrySelector.addEventListener('change', function() {
hiddenSelector.value += ' ' + stateSelector.value;
});
<form>
<p class="form-field state pd-select required">
<label class="field-label" for="usstatevalue">State</label>
<select name="usstatevalue" id="usstatevalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47815">AL</option>
<option value="47817">AK</option>
<option value="47819">AZ</option>
<option value="47821">AR</option>
<option value="47823">CA</option>
<option value="47825">CO</option>
<option value="47827">CT</option>
<option value="47829">DE</option>
<option value="47831">DC</option>
<option value="47833">FL</option>
<option value="47835">GA</option>
<option value="47837">HI</option>
</select>
</p>
<p class="form-field Province_Canada pd-select required">
<label class="field-label" for="provcanvalue">Province – Canada</label>
<select name="provcanvalue" id="provcanvalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47791">Alberta</option>
<option value="47793">British Columbia</option>
<option value="47795">Manitoba</option>
<option value="47797">New Brunswick</option>
<option value="47799">Newfoundland and Labrador</option>
<option value="47801">Nova Scotia</option>
<option value="47803">Nunavut</option>
<option value="47805">Ontario</option>
<option value="47807">Prince Edward Island</option>
<option value="47809">Quebec</option>
<option value="47811">Saskatchewan</option>
<option value="47813">Yukon</option>
</select>
</p>
<p class="form-field State_Province">
<label for="stateprovnew">hidden field</label>
<input type="text" name="stateprovnew" id="stateprovnew" value="">
</p>
</form>

jQuery - How to combine Two select lists into One text input?

I've got two select lists I'm trying to combine into one text input. (https://jsfiddle.net/ecg6a3fL)
I got it working for the value, but not the text for some reason.
Changing it to .text() rather than .val() produces an odd result (showing Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec , 2020 2021 )
In addition, I have these separated by a "comma space"... if anyone can help for this delimiter to not show if only one of either select box is selected, that would be very much appreciated!
An example goal is for it to display: "Jan, 2020" or "Jan" or "2020"
Thank you for your help!
HTML and jQuery:
$('#edit-field-report-last-seen-und-0-value-month, #edit-field-report-last-seen-und-0-value-year').change(function() {
var combined = $('#edit-field-report-last-seen-und-0-value-month').text() +', '+ $('#edit-field-report-last-seen-und-0-value-year').text();
$("#edit-field-report-last-seen-cached-und-0-value").val(combined);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="edit-field-report-last-seen-und-0-value" class="date-padding clearfix">
<div class="control-group form-type-select form-item-field-report-last-seen-und-0-value-month form-item">
<label for="edit-field-report-last-seen-und-0-value-month" class="control-label">Month </label>
<div class="controls">
<div class="date-month">
<select class="date-clear form-select" id="edit-field-report-last-seen-und-0-value-month" name="field_report_last_seen[und][0][value][month]">
<option value="" selected="selected"></option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</div>
</div>
</div>
<div class="control-group form-type-select form-item-field-report-last-seen-und-0-value-year form-item">
<label for="edit-field-report-last-seen-und-0-value-year" class="control-label">Year </label>
<div class="controls">
<div class="date-year">
<select class="date-clear form-select" id="edit-field-report-last-seen-und-0-value-year" name="field_report_last_seen[und][0][value][year]">
<option value="" selected="selected"></option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</div>
</div>
</div>
</div>
<input class="text-full form-text" type="text" id="edit-field-report-last-seen-cached-und-0-value" name="field_report_last_seen_cached[und][0][value]" value="" size="20" maxlength="50">
You can try like below :
$('#edit-field-report-last-seen-und-0-value-month, #edit-field-report-last-seen-und-0-value-year').change(function() {
$("#edit-field-report-last-seen-cached-und-0-value").val($("#edit-field-report-last-seen-und-0-value select").map(function() {
//not first value...
if ($(this).val() != "") {
return $(this).find("option:selected").text()
}
}).get().join(', ')); //join values
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="edit-field-report-last-seen-und-0-value" class="date-padding clearfix">
<div class="control-group form-type-select form-item-field-report-last-seen-und-0-value-month form-item">
<label for="edit-field-report-last-seen-und-0-value-month" class="control-label">Month </label>
<div class="controls">
<div class="date-month">
<select class="date-clear form-select" id="edit-field-report-last-seen-und-0-value-month" name="field_report_last_seen[und][0][value][month]">
<option value="" selected="selected"></option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</div>
</div>
</div>
<div class="control-group form-type-select form-item-field-report-last-seen-und-0-value-year form-item">
<label for="edit-field-report-last-seen-und-0-value-year" class="control-label">Year </label>
<div class="controls">
<div class="date-year">
<select class="date-clear form-select" id="edit-field-report-last-seen-und-0-value-year" name="field_report_last_seen[und][0][value][year]">
<option value="" selected="selected"></option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</div>
</div>
</div>
</div>
<input class="text-full form-text" type="text" id="edit-field-report-last-seen-cached-und-0-value" name="field_report_last_seen_cached[und][0][value]" value="" size="20" maxlength="50">

How to disable multiple select tag when selecting one?

I have three select tags with values in it. If I select Unlimited in one of the values I want the rest of the two select tags to auto-switch to the same value (Unlimited) and gets disabled.
If I select the option Unlimited from the first select tag the second and thirds value should switch to Unlimited and inputs should get disabled.
If I select the middle option (2nd option) the first select tag and third select tag's value should auto-select to Unlimited and both input fields should get disabled.
Likewise, if I select Unlimited from the last select tag, the first and second should auto-switch to Unlimited and both input fields should get disabled.
Is this possible to do it via pure CSS? If not, how do I achieve it?
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row mb-3">
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per day</label>
<select id="distancePerDay" class="form-control custom-select">
<option value="100">100</option>
<option value="150" selected="selected">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per week</label>
<select id="distancePerWeek" class="form-control custom-select">
<option value="700">700</option>
<option value="950" selected="selected">950</option>
<option value="1200">1200</option>
<option value="1450">1450</option>
<option value="1700">1700</option>
<option value="1950">1950</option>
<option value="2200">2200</option>
<option value="Unlimited" >Unlimited</option>
</select>
</div>
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per month</label>
<select id="distancePerMonth" class="form-control custom-select">
<option value="1500">1500</option>
<option value="1850">1850</option>
<option value="2250">2250</option>
<option value="2600">2600</option>
<option value="2950">2950</option>
<option value="3300">3300</option>
<option value="3650">3650</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
</div>
Hi you could do that with javascript, I created validate function and added onchange="validate(event)" in each select like so:
const validate = event => {
const dropdowns = ['distancePerDay','distancePerWeek','distancePerMonth'];
const dropdownsToUpdate = dropdowns.filter(x => x !== event.target.id);
for(let i = 0; i < dropdownsToUpdate.length; i++){
const item = document.getElementById(dropdownsToUpdate[i]);
if(event.target.value === 'Unlimited'){
item.value = 'Unlimited';
item.setAttribute('disabled', '');
}
else {
item.removeAttribute('disabled');
}
}
}
<div>
<label>Distance per day</label>
<select id="distancePerDay" onchange="validate(event)">
<option value="100">100</option>
<option value="150" selected="selected">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
<div>
<label>Distance per week</label>
<select id="distancePerWeek" onchange="validate(event)">
<option value="700">700</option>
<option value="950" selected="selected">950</option>
<option value="1200">1200</option>
<option value="1450">1450</option>
<option value="1700">1700</option>
<option value="1950">1950</option>
<option value="2200">2200</option>
<option value="Unlimited" >Unlimited</option>
</select>
</div>
<div>
<label>Distance per month</label>
<select id="distancePerMonth" onchange="validate(event)">
<option value="1500">1500</option>
<option value="1850">1850</option>
<option value="2250">2250</option>
<option value="2600">2600</option>
<option value="2950">2950</option>
<option value="3300">3300</option>
<option value="3650">3650</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
I am storing the last known value in a custom attribute last in the element before all items were marked Unlimited. When changed to not unlimited it will remember the last known value of each select element and restore it.
If you are looking for a jQuery solution, You add change event listeners to all select elements and if there is any element who has 'Unlimited' as values filter the selects w/o the current element and assign property disabled if 'Unlimited' is selected
$('select').on('change', function(e){
const isUnlimited = $(this).val() === 'Unlimited';
$('select')
.not(this)
.prop({disabled: isUnlimited})
.attr('last', function(i,v){ return isUnlimited ? $(this).val() : v; })
.val(function(i,v){ return isUnlimited ? 'Unlimited' : v === 'Unlimited' ? $(this).attr('last') : v; });
});
And using jQuery ensures you write less do more. Snippet attached below.
$('select').on('change', function(e){
const isUnlimited = $(this).val() === 'Unlimited';
$('select')
.not(this)
.prop({disabled: isUnlimited})
.attr('last', function(i,v){return isUnlimited ? $(this).val() : v;})
.val(function(i,v){return isUnlimited ? 'Unlimited' : v === 'Unlimited' ? $(this).attr('last') : v; });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row mb-3">
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per day</label>
<select id="distancePerDay" class="form-control custom-select">
<option value="100">100</option>
<option value="150" selected="selected">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per week</label>
<select id="distancePerWeek" class="form-control custom-select">
<option value="700">700</option>
<option value="950" selected="selected">950</option>
<option value="1200">1200</option>
<option value="1450">1450</option>
<option value="1700">1700</option>
<option value="1950">1950</option>
<option value="2200">2200</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per month</label>
<select id="distancePerMonth" class="form-control custom-select">
<option value="1500">1500</option>
<option value="1850">1850</option>
<option value="2250">2250</option>
<option value="2600">2600</option>
<option value="2950">2950</option>
<option value="3300">3300</option>
<option value="3650">3650</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
</div>
Pure JS (why jQuery?)
I made a change : if the select with 'Unlimited' is changed again, the 2 other are not disabled any more, and get their ancient value before to be disabled
Second solution, with persistents values in a dataset value:
const threeSelects = document.querySelectorAll('select')
, C_Unlimited = 'Unlimited'
threeSelects.forEach(Slc=>{
Slc.dataset.val = Slc.value
Slc.onchange=e=>{
let isDisabled = (Slc.value===C_Unlimited)
Slc.dataset.val = Slc.value
threeSelects.forEach(Sx=>{
if(Sx!==Slc) Sx.value = (Sx.disabled=isDisabled)? C_Unlimited: Sx.dataset.val
})
}
})
const threeSelects = document.querySelectorAll('select')
, C_Unlimited = 'Unlimited'
threeSelects.forEach(Slc=>{
Slc.dataset.val = Slc.value
Slc.onchange=e=>{
let isDisabled = (Slc.value===C_Unlimited)
Slc.dataset.val = Slc.value
threeSelects.forEach(Sx=>{
if(Sx!==Slc) Sx.value = (Sx.disabled=isDisabled)? C_Unlimited: Sx.dataset.val
})
}
})
.col-12 { display:inline-block; padding:.5em }
label, select { float:left;clear:both }
<div class="row mb-3">
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per day</label>
<select id="distancePerDay" class="form-control custom-select">
<option value="100">100</option>
<option value="150" selected="selected">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per week</label>
<select id="distancePerWeek" class="form-control custom-select">
<option value="700">700</option>
<option value="950" selected="selected">950</option>
<option value="1200">1200</option>
<option value="1450">1450</option>
<option value="1700">1700</option>
<option value="1950">1950</option>
<option value="2200">2200</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per month</label>
<select id="distancePerMonth" class="form-control custom-select">
<option value="1500">1500</option>
<option value="1850">1850</option>
<option value="2250">2250</option>
<option value="2600">2600</option>
<option value="2950">2950</option>
<option value="3300">3300</option>
<option value="3650">3650</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
</div>
First solution, with persistents values in a JS table:
const threeSelects = Array
.from(document.querySelectorAll('#distancePerDay, #distancePerWeek, #distancePerMonth '))
.map(sx => ({ sel: sx, val: sx.value }))
, C_Unlimited = 'Unlimited'
threeSelects.forEach(eSchg => { eSchg.sel.onchange = e => {
eSchg.val = eSchg.sel.value
threeSelects.forEach(eSx => {
if (eSx.sel !== eSchg.sel) {
if (eSchg.sel.value === C_Unlimited) {
eSx.sel.value = C_Unlimited
eSx.sel.disabled = true
}
else if (eSx.sel.value === C_Unlimited) {
eSx.sel.value = eSx.val
eSx.sel.disabled = false
}
}
})
} })
.col-12 { display:inline-block; padding:.5em }
label, select { float:left;clear:both }
<div class="row mb-3">
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per day</label>
<select id="distancePerDay" class="form-control custom-select">
<option value="100">100</option>
<option value="150" selected="selected">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per week</label>
<select id="distancePerWeek" class="form-control custom-select">
<option value="700">700</option>
<option value="950" selected="selected">950</option>
<option value="1200">1200</option>
<option value="1450">1450</option>
<option value="1700">1700</option>
<option value="1950">1950</option>
<option value="2200">2200</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per month</label>
<select id="distancePerMonth" class="form-control custom-select">
<option value="1500">1500</option>
<option value="1850">1850</option>
<option value="2250">2250</option>
<option value="2600">2600</option>
<option value="2950">2950</option>
<option value="3300">3300</option>
<option value="3650">3650</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
</div>
you can make it easily with jquery, with not().
you can also use .prop('selectedIndex',0); to reset your <select> when you choose another option to "Unlimited":
$( "select" ).on( "change", function() {
var sw = $(this).val() == "Unlimited";
var others = $('select').not(this).prop('disabled', sw);
sw ? others.val("Unlimited") : others.val()=="Unlimited" ? others.prop('selectedIndex',0) : 0;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row mb-3">
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per day</label>
<select id="distancePerDay" class="form-control custom-select">
<option value="100">100</option>
<option value="150" selected="selected">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per week</label>
<select id="distancePerWeek" class="form-control custom-select">
<option value="700">700</option>
<option value="950" selected="selected">950</option>
<option value="1200">1200</option>
<option value="1450">1450</option>
<option value="1700">1700</option>
<option value="1950">1950</option>
<option value="2200">2200</option>
<option value="Unlimited" >Unlimited</option>
</select>
</div>
<div class="col-12 col-md-4 col-lg-3 mb-3">
<label>Distance per month</label>
<select id="distancePerMonth" class="form-control custom-select">
<option value="1500">1500</option>
<option value="1850">1850</option>
<option value="2250">2250</option>
<option value="2600">2600</option>
<option value="2950">2950</option>
<option value="3300">3300</option>
<option value="3650">3650</option>
<option value="Unlimited">Unlimited</option>
</select>
</div>
</div>

How to use jQuery hide effect in select option

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>

Dropdownlist using javascript

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>

Categories