Im wondering how to disable the third dropdown in case it didnt have any options after filtering (Excluding the Select option placeholder option).
I guess that adding a if statment like if and $select3.length could solve the issue but dont know how to implement that along with the filtering in my code since im very new to javascript.
<select name="select1" id="select1">
<option value="" disabled selected>Select your option</option>
<option value="1" option-id="1">Sitzen </option>
<option value="2" option-id="2">Schlafen</option>
<option value="3" option-id="3">Reisen</option>
</select>
<select name="select2" id="select2" disabled>
<option value="a" disabled selected option-id="a">Select your option</option>
<option value="1" option-id="1">Comfort Cushion</option>
<option value="2" option-id="1">Freilagerungssitzkissen</option>
<option value="3" option-id="1">Rückenkissen</option>
<option value="4" option-id="1">Sitzkissen zum Druckmanagement</option>
<option value="5" option-id="1">Wedge Cushion</option>
<option value="6" option-id="1">Wedge Pillow</option>
<option value="7" option-id="2">Comfort Pillow</option>
<option value="8" option-id="2">Dreamy Cushion</option>
<option value="9" option-id="2">Kniekissen</option>
<option value="10" option-id="3">Reise Nackenkissen</option>
</select>
<select name="select3" id="select3" disabled>
<option value="a" disabled selected option-id="a">Select your option</option>
<option value="2" option-id="2" >Standard</option>
<option value="3" option-id="2" >Large</option>
<option value="1" option-id="3" >Small</option>
<option value="2" option-id="3" >Standard</option>
<option value="2" option-id="4" >Standard</option>
<option value="3" option-id="4" >Large</option>
</select>
var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),
$select3 = $( '#select3' ), // I added that line but not sure if its correct
$options_a = $select2.find( 'option' ),
$options_b = $select3.find( 'option' ); // I added that line but not sure if its correct
$select1.on( 'change', function() {
$select2.prop("disabled", false);
$select2.html( $options_a.filter(function () {
return $(this).attr('option-id') === $select1.val() ||
$(this).attr('option-id') === "a"
}))
$select2.val('a')
$select3.val('a')
} )
// I added the next lines for select3 but not sure if they are correct
$select2.on( 'change', function() {
$select3.prop("disabled", false);
$select3.html( $options_b.filter(function () {
return $(this).attr('option-id') === $select2.val() ||
$(this).attr('option-id') === "a"
}));
$select3.val('a')
} )
https://jsfiddle.net/arabtornado/bkm25otw/46/
To achieve this you can set the disabled property on $select3 depending on the number of option elements within it. To do that you can add this line within the change event handler for $select2:
$select3.prop('disabled', $select3.find('option').length == 1);
Note that it's disabled when there's only 1 element, as you always have the 'Select your option' default.
Also worth noting is that option-id is a non-standard attribute, which will mean your HTML is invalid. I would suggest using data attributes instead to maintain validity.
var $select1 = $('#select1'),
$select2 = $('#select2'),
$select3 = $('#select3'),
$options_a = $select2.find('option'),
$options_b = $select3.find('option');
$select1.on('change', function() {
$select2.prop("disabled", false).html($options_a.filter(function() {
return $(this).data('option-id') === parseInt($select1.val(), 10) || $(this).data('option-id') === "a"
})).val('a')
$select3.val('a')
})
$select2.on('change', function() {
$select3.html($options_b.filter(function() {
return $(this).data('option-id') === parseInt($select2.val(), 10) || $(this).data('option-id') === "a"
}));
$select3.prop('disabled', $select3.find('option').length == 1).val('a')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="" disabled selected>Select your option</option>
<option value="1" data-option-id="1">Sitzen </option>
<option value="2" data-option-id="2">Schlafen</option>
<option value="3" data-option-id="3">Reisen</option>
</select>
<select name="select2" id="select2" disabled>
<option value="a" disabled selected data-option-id="a">Select your option</option>
<option value="1" data-option-id="1">Comfort Cushion</option>
<option value="2" data-option-id="1">Freilagerungssitzkissen</option>
<option value="3" data-option-id="1">Rückenkissen</option>
<option value="4" data-option-id="1">Sitzkissen zum Druckmanagement</option>
<option value="5" data-option-id="1">Wedge Cushion</option>
<option value="6" data-option-id="1">Wedge Pillow</option>
<option value="7" data-option-id="2">Comfort Pillow</option>
<option value="8" data-option-id="2">Dreamy Cushion</option>
<option value="9" data-option-id="2">Kniekissen</option>
<option value="10" data-option-id="3">Reise Nackenkissen</option>
</select>
<select name="select3" id="select3" disabled>
<option value="a" disabled selected data-option-id="a">Select your option</option>
<option value="2" data-option-id="2">Standard</option>
<option value="3" data-option-id="2">Large</option>
<option value="1" data-option-id="3">Small</option>
<option value="2" data-option-id="3">Standard</option>
<option value="2" data-option-id="4">Standard</option>
<option value="3" data-option-id="4">Large</option>
</select>
Related
I have here one radio button class="gender" and 3 dropdown menus class="type","model","acc" and one button class="query".
How to click query button when any of values of three dropdown menus changes but not change to empty value and the value of radiobutton is query?
$(document).ready(function(){
$('.type , .model , .acc').change(function(){
if($(".type select option[value='selectionKey']").attr('selected') == 'selected' && $(".model select option[value='selectionKey']").attr('selected') == 'selected' && $(".acc select option[value='selectionKey']").attr('selected') == 'selected'&& $('.gender input[type="radio"]').attr("value")=="male"){
$('.query').click();
alert('123')
}else{
}
})
})
* {
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input calss="gender" type="radio" name="gender" value="male"> Male<br>
<input calss="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select calss="type">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
<select calss="model">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
<select calss="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
<br>
<input class="query" type="button" value="Query">
Try this:
$('input[type="radio"], select').click(function(){
alert('hello');
});
Working Fiddle
First of all you need to correct your code :
Change calss to class also for each class of type,model,account you have used same value="option1" which needs to be changed accordingly as
Change this:
<select calss="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
To this
<select class="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
Now answer to your question is :
$(document).ready(function(){
$('.type , .model , .acc').change(function(){
if($(".type :selected").val() != '' || $(".model :selected").val() != '' || $(".acc :selected").val() != ''){
$('.query').click();
alert('123')
}else{
alert('no option is selected);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input calss="gender" type="radio" name="gender" value="male"> Male<br>
<input calss="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select calss="type">
<option value=""></option>
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="model">
<option value=""></option>
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="acc">
<option value=""></option>
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<br>
<input class="query" type="button" value="Query">
1)You need to use .is(':selected') property.
.is() selector check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
2)If you want to get value from radio button you need to use :checked property like this:
if($('.gender:checked').val()=="male"){}
Here is solution :
$('.type , .model , .acc').change(function(){
if($(".type option[value='option1']").is(':selected') && $(".model option[value='option2']").is(':selected') && $(".acc option[value='option3']").is(':selected') && $('.gender:checked').val()=="male"){
$('.query').click();
alert('123');
}else{
}
});
* {
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="gender" type="radio" name="gender" value="male"> Male<br>
<input class="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select class="type">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select class="model">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select class="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<br>
<input class="query" type="button" value="Query">
You can do that by checking the selected data value length like this- if (this.value.length > 0) and after that, trigger a click on the button :)
Demo code is given here-
$(document).ready(function()
{
$('#query').click(function()
{
alert("Query Clicked");
});
$('input[type=radio][name=gender], select').on('change', function()
{
if (this.value.length > 0)
{
$('#query')[0].click();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input calss="gender" type="radio" name="gender" value="male"> Male<br>
<input calss="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select calss="type">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="model">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<br>
<input id="query" type="button" value="Query">
I need one help. I need to calculate difference between two day fields using Angular.js/Javascript.I am explaining my code below.
<select class="form-control" id="daysFrom" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
My second day drop down is given below.
<select class="form-control" id="daysTo" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
Here i have two dropdown like day from and day to. I need when user will select two day the difference should calculate including those days. Suppose user selected first Monday and wednesday,it should calculate as 3 in difference. Please help me.
If you call the first input dayFrom and the second input dayTo then:
function calculateDifference(dayFrom, dayTo) {
return Math.abs(dayTo + dayFrom) + 1;
}
var difference = calculateDifference($scope.dayFrom, $scope.dayTo);
var difference=abs(parseInt($scope.daysTo)-parseInt($scope.daysFrom))+1;
$('#daysFrom, #daysTo').change(function(){
if ($('#daysTo').val() < $('#daysFrom').val())
{
console.log("Wrong day choose");
return false;
}
console.log($('#daysTo').val() - $('#daysFrom').val()+1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
From : <select class="form-control" id="daysFrom" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
To : <select class="form-control" id="daysTo" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
I do not see any angular so I show how You can manage that in pure js:
(function(){
//private scope
//variables - DOM references
var output=document.querySelector("#output");
var from=document.querySelector("#daysFrom");
var to=document.querySelector("#daysTo");
//error codes
var ERROR_CHOOSE=-1;
var ERROR_DIFF=-2;
//calculates
function calcDiff(){
if (to.value==="" || from.value==="")
return ERROR_CHOOSE;
if (to.value<from.value)
return ERROR_DIFF;
return to.value-from.value+1;
};
//return human results
function display(){
var result=calcDiff();
if (result>0){ //we know no error
if (result==1)
return result+=" day";
else
return result+=" days";
}
//here errors
return result==ERROR_CHOOSE?"Choose both days":"Choose right days";
};
//usage example
from.addEventListener("change",function(){
output.innerText=display();
});
to.addEventListener("change",function(){
output.innerText=display();
});
})();
<select class="form-control" id="daysFrom" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
<select class="form-control" id="daysTo" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
<div style="margin-top:10px">Current trip length:
<b id="output">Please choose days</b>
</div>
I have tried this, but not working fine. HTML:
<div>
<select id="color" name="color" onchange="myFunction()">
<option value=""> choose options </option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size" >
<option value=""> choose options </option>
<option value="3" class="27">Apple </option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
SCRIPT:
function myFunction()
{
$variable=$("#size").html();
$("#size").html($variable);
var val=$("#color").find(":selected").val();
$("#size option[value!="+val+"]").remove();
}
in place of .remove() I tried .hide() which seems to be not working. Could anyone help me out with this?
You should show all options before hide.
function myFunction()
{
$variable=$("#size").html();
$("#size").html($variable);
var val=$("#color").find(":selected").val();
$("#size option").show();
$("#size option[value!="+val+"]").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<select id="color" name="color" onchange="myFunction()">
<option value=""> choose options </option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size" >
<option value=""> choose options </option>
<option value="3" class="27">Apple </option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
You can make a mix of JS and CSS.
So we "reset" the size select, by removing all the disabled and also the selected.
Something like this:
$(document).ready(function () {
var colors = $('#color'),
size = $('#size');
colors.change(function () {
var val = $(this).find(":selected").val();
size.find('option').removeAttr('disabled');
size.find('option:selected').removeAttr('selected');
size.find("option[value!=" + val + "]").attr('disabled', 'disabled');
})
})
option:disabled {
display: none;
}
option:first-child {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="color" name="color">
<option value="">choose options</option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size">
<option value="">choose options</option>
<option value="3" class="27">Apple</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
Edit 1:
Using data-group instead of class or value
$(document).ready(function () {
var colors = $('#color'),
size = $('#size');
colors.change(function () {
var val = $(this).find(":selected").attr('data-group');
size.find('option').removeAttr('disabled');
size.find('option:selected').removeAttr('selected');
size.find("option[data-group!=" + val + "]").attr('disabled', 'disabled');
})
})
option:disabled {
display: none;
}
option:first-child {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="color" name="color">
<option value="">choose options</option>
<option value="1" data-group="1">AB</option>
<option value="2" data-group="2">ABC</option>
<option value="3" data-group="3">ABCD</option>
</select>
<select id="size" name="size">
<option value="">choose options</option>
<option value="3" class="27" data-group="3">Apple</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="3" class="28" data-group="3">Grapes</option>
</select>
</div>
I have a drop down which lists several countries and I want to display only a few countries depending on some conditions.
jquery is as below:
function form_onLoad() {
var countries = "";
if(document.forms[0].countries_new) {
countries = document.forms[0].countries_new.value;
}
}
Dropdown :
<select name="country" size="1">
<option value=""></option>
<option value="1" >Afghanistan</option>
<option value="2" >Albania</option>
<option value="3" >Algeria</option>
<option value="4" >Andorra</option>
<option value="5" >Angola</option>
<option value="6" >Antigua & Deps</option>
<option value="7" >Argentina</option>
<option value="8" >Armenia</option>
<option value="9" >Australia</option>
<option value="10" >Austria</option>
<option value="11" >Azerbaijan</option>
<option value="12" >Bahamas</option>
</select>
Inside the jquery, I want to replace the existing dropdown(above) which has all countries with the countries variable which has only a few options.
You can use JQuery library to achieve it
$('select[name="country"]').find('option').each(function(){
if($(this).text()=='Armenia' || $(this).attr('value')=='12'){
$(this).remove(); //It will remove Armenia and Bahamas
}
});
I have three dropdowns. I want that when the user selects any item from dropdown 1, then that item should be disabled in dropdown 2 and 3. Also, if an item is selected in dropdown 2, then both selected items must be disabled from dropdown 3.
Here is the code I am using:
<!DOCTYPE html>
<html>
<head>
<script>
function updateSelect(changedSelect, selectId) {
var otherSelect = document.getElementById(selectId);
for (var i = 0; i < otherSelect.options.length; ++i) {
otherSelect.options[i].disabled = false;
}
if (changedSelect.selectedIndex == 0) {
return;
}
otherSelect.options[changedSelect.selectedIndex].disabled = true;
}
</script>
</head>
<body>
<select id="select_1" onchange="updateSelect(this,'select_2'),updateSelect(this,'select_3');" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select_2" name="indication_subject[]" onchange="updateSelect(this,'select_1','select_3');" >
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select_3" name="indication_subject[]" onchange="updateSelect(this,'select_1','select_2');" >
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
</body>
</html>
Below is the JSFiddle link which works for two dropdowns, not three. How can I add a third dropdown for this?
http://jsfiddle.net/x4E5Q/1/
Try This:
HTML
<select id="select1" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select2" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select3" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
JS
$(document).ready(function(){
$("select").change(function() {
$("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
});
});
Demo
See below code
$(document).ready(function() {
$("select").on('hover', function () {
$previousValue = $(this).val();
}).change(function() {
$("select").not(this).find("option[value='"+ $(this).val() + "']").attr('disabled', true);
$("select").not(this).find("option[value='"+ $previousValue + "']").attr('disabled', false);
});
});
$("#confirm-form").submit(function(e) {
e.preventDefault();
$("select").find("option").removeAttr('disabled');
document.getElementById('confirm-form').submit();
});
$(document).ready(function(){
$("select").on('focus', function () {
$("select").find("option[value='"+ $(this).val() + "']").attr('disabled', false);
}).change(function() {
$("select").not(this).find("option[value='"+ $(this).val() + "']").attr('disabled', true);
});
});