Exclude/disable previously selected option from drop-down - javascript

I have 3 drop-downs: Product, Batch and Storage
HTML:
<div class="row div-1">
<div class="form-group">
<select class="form-control product-id">
<option value="" disabled selected>Select Product</option>
<option value="1">Product One</option>
<option value="2">Product Two</option>
</select>
</div>
<div class="form-group">
<select class="form-control product-batch">
<option value="" disabled selected>Select Batch</option>
<option value="1">Batch One</option>
<option value="2">Batch Two</option>
</select>
</div>
<div class="form-group">
<select class="form-control product-storage">
<option value="" disabled selected>Select Storage</option>
<option value="1">Storage One</option>
<option value="2">Storage Two</option>
</select>
</div>
</div>
<div class="row div-2">
<div class="form-group">
<select class="form-control product-id">
<option value="" disabled selected>Select Product</option>
<option value="1">Product One</option>
<option value="2">Product Two</option>
</select>
</div>
<div class="form-group">
<select class="form-control product-batch">
<option value="" disabled selected>Select Batch</option>
<option value="1">Batch One</option>
<option value="2">Batch Two</option>
</select>
</div>
<div class="form-group">
<select class="form-control product-storage">
<option value="" disabled selected>Select Storage</option>
<option value="1">Storage One</option>
<option value="2">Storage Two</option>
</select>
</div>
</div>
How to check if options are already selected based on 3 select options?
What I mean is if "Product One", "Batch One" and "Storage One" from div-1 is already selected and if I try to select same drop-down options in div-2, it should not allow to select again already selected options.
But can allow if I select "Product One", "Batch Two" and "Storage Two".
In short same selected options cannot be repeated.

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>

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>

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

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.

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>

dropdown menu html form personalized category

i have the following part of code of a dropdown menu
<p>
<label for='Select a Category '>Select a Category<font color="red"><strong>*</strong></font>: </label></p>
<p><div id='contactform_category_errorloc' class='err'></div>
<select name="category" class="input">
<option value="0" selected="selected">
[choose yours]
</option>
<option value="Arts and entertainment">Arts and entertainment</option>
<option value="Automotive">Automotive</option>
<option value="Business">Business</option>
<option value="Computers">Computers</option>
<option value="Games">Games</option>
<option value="Health">Health</option>
<option value="Internet">Internet</option>
<option value="News and Media">News and Media</option>
<option value="Recreation">Recreation</option>
<option value="Reference">Reference</option>
<option value="Shopping">Shopping</option>
<option value="Sports">Sports</option>
<option value="World">World</option>
</select>
</p>
i want add in drop down menu an option with value: "custom" that when i select this option appear just below a field blank as input text where i can add my personalized text so i can insert personalized category
it's possible?
maybe you mean something like this: http://jsbin.com/ubihuw/edit#javascript,html
so in php or something you can check then the "my_own_text" field ... dont know what you will exactly do ;)
js:
$('.input').change(function()
{
if($(this).attr('value') == "0") {
$('#choose_own_text').append('<input type="text" id="my_own_text" name="my_own_text" value="Please type in .." />');
} else {
$('#choose_own_text').empty();
}
});
your code ...
<p><div id='contactform_category_errorloc' class='err'></div>
<select name="category" class="input">
<option value="0" selected="selected">
[choose yours]
</option>
<option value="Arts and entertainment">Arts and entertainment</option>
<option value="Automotive">Automotive</option>
<option value="Business">Business</option>
<option value="Computers">Computers</option>
<option value="Games">Games</option>
<option value="Health">Health</option>
<option value="Internet">Internet</option>
<option value="News and Media">News and Media</option>
<option value="Recreation">Recreation</option>
<option value="Reference">Reference</option>
<option value="Shopping">Shopping</option>
<option value="Sports">Sports</option>
<option value="World">World</option>
</select>
<div id="choose_own_text"></div>
</p>

Categories