in my form i have three drop down lists to select days. and their corresponding available time. If one selects available day as monday and time morning. then in rest two pair of drop down list morning slot for monday should be disabled. html code is as:
DAY 1:<select id="day1" title="- Select day -" name="wd1" id="wd1" tabindex="14" >
<option selected>-select-</option>
<option value="1" >Sunday</option>
<option value="2" >Monday</option>
<option value="3" >Tuesday</option>
<option value="4" >Wednesday</option>
<option value="5" >Thursday</option>
<option value="6" >Friday</option>
<option value="7" >Saturday</option>
</select>
TIME 1 : <select name="tslot1" id="tslot1" tabindex="15">
<option selected>-select-</option>
<option>Morning(8-12)</option>
<option>Afternoon(12-4pm)</option>
<option>Evening(4-8pm)</option></select><br><br>
DAY 2:<select id="day2" title="- Select day -" name="wd2" id="wd2" tabindex="16" >
<option selected>-select-</option>
<option value="1" >Sunday</option>
<option value="2" >Monday</option>
<option value="3" >Tuesday</option>
<option value="4" >Wednesday</option>
<option value="5" >Thursday</option>
<option value="6" >Friday</option>
<option value="7" >Saturday</option>
</select>
TIME 2 : <select name="tslot2" id="tslot2" tabindex="17" >
<option selected>-select-</option>
<option>Morning(8-12)</option>
<option>Afternoon(12-4pm)</option>
<option>Evening(4-8pm)</option></select><br/><br/>
DAY 3:<select select id="day3" title="- Select day -" name="wd3" id="wd3" tabindex="18" >
<option selected>-select-</option>
<option value="1" >Sunday</option>
<option value="2" >Monday</option>
<option value="3" >Tuesday</option>
<option value="4" >Wednesday</option>
<option value="5" >Thursday</option>
<option value="6" >Friday</option>
<option value="7" >Saturday</option>
</select>
TIME 3 : <select name="tslot3" id="tslot3" tabindex="19" >
<option selected>-select-</option>
<option>Morning(8-12)</option>
<option>Afternoon(12-4pm)</option>
<option>Evening(4-8pm)</option></select><br/><br/>
Please do help me with this problem...
In the HTML for the select tags you have used two id's namely "day1" and "wd1". id is a unique feature of a particular tag.So u can change it with a single id.
i have made the following changes to the HTML page :DAY 1:
<select id="day1" title="- Select day -" name="day1" tabindex="14" >
<option selected>-select-</option>
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>.
so we may refer to the select id "day1" and write a on change function for the necessary validations.
Javascript code:
$(document).ready(function(){
$("#day1").on('change',function() {
var index = $('#day1').get(0).selectedIndex;
alert(index+"index");
$('#day2 option:eq(' + index + ')').attr("disabled","disabled");
$('#day3 option:eq(' + index + ')').attr("disabled","disabled");
});
});
where "day2" and "day3" corresponds to the id of the below select fields with days.
Similarly same approach can be dealt with time too.
Have a look at this script http://plungjan.name/test/unique_days.html
Should help you get started
Related
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>
I have looked at multiple examples of js being used to auto calculate the total but haven't found any applicable for me which has fields calculating different numbers to be combined to create a total. Here is my code below so you can understand more.
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<script language="javascript">
function Calc(className){
var elements = document.getElementsByClassName(className);
var totalCost = 0;
for(var i = 0; i < elements.length; i++){
totalCost += parseInt(elements[i].value);
}
document.tickets.totalCost.value = '£' + totalCost;
}
</script>
</head>
<body>
<form name="tickets" id="tickets">
<!--FIRST CLASS that takes the value entered and * by the ticket price for an adult. Price is £18 * Number of Tickets -->
<label for="noAdults"> Number of Adults</label>
<select name="noAdults" id="noAdults" class="adultTotal" onclick="Calc('adultTotal')">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
</select>
<label for="pricing"> X £18</label><br><br>
<!--Not class as children under 2 are not charged-->
<label for="childUnder2"> Number of Children aged 2 or less </label>
<select name="childUnder2" id="childUnder2">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
</select>https://stackoverflow.com/questions/ask?title=auto%20calculate%20values%20onclick#
<label for="pricing"> X £FREE</label><br><br>
<!--SECOND CLASS that takes the value entered and * by the ticket price for a child ages 3-10. Price is £10 * Number of Tickets -->
<label for="childBox1"> Number of Children aged 3-10</label>
<select name="childBox1" id="childBox1" class="childBox1" onclick="Calc('childBox1')">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
</select>
<label for="pricing"> X £10</label><br><br>
<!--EDIT CLASS that takes the value entered and * by the ticket price for a child ages 11-16. Price is £13 * Number of Tickets -->
<label for="childBox2"> Number of Children aged 11-16</label>
<select name="childBox2" id="childBox2" class="childBox2" onclick="Calc('childBox2')">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
</select>
<label for="pricing"> X £13</label><br><br>
<!--If checked, the priced is double from that of a single ticket. Total price is * 2. -->
<input type="checkbox" name="rtnJourney" id="rtnJourney" value="2" onclick="Calc('rtnJourney')">Return Journey - If unchecked, price is halved<br>
Total: <input type="text" id="totalCost" name="totalCost">
</form>
</body></html>
Now I understand why the above JS code doesn't work and I fetched this from one of the examples online which took every value from a CLASS and combined them but since I have different multiplication values for each entry I tried to modify it which didn't workout. I am not sure how to do what I need it to do to calculate the total. Also please note that it doesn't add the values yet, for now I just want to make it calculate the total from all the fields.
p.s I am really not familiar with JS and I really appreciate any help given.
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<script language="javascript">
var map = {
"noAdults": {
value: 0,
multiplier: 18
},
"childUnder2": {
value: 0,
multiplier: 0
},
"childBox1": {
value: 0,
multiplier: 10
},
"childBox2": {
value: 0,
multiplier: 13
}
}
var rtnJourney = false;
function displayTotal() {
var total = 0;
for (var key in map) {
total += map[key].value * map[key].multiplier;
}
total = rtnJourney ? total * 2 : total;
document.tickets.totalCost.value = '£' + total;
}
function getTotal(dom) {
map[dom.id].value = dom.value;
displayTotal();
}
function getChecked(dom) {
rtnJourney = dom.checked;
displayTotal();
}
</script>
</head>
<body>
<form name="tickets" id="tickets">
<!--FIRST CLASS that takes the value entered and * by the ticket price for an adult. Price is £18 * Number of Tickets -->
<label for="noAdults"> Number of Adults</label>
<select name="noAdults" id="noAdults" class="adultTotal" onchange="getTotal(this)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<label for="pricing"> X £18</label>
<br>
<br>
<!--Not class as children under 2 are not charged-->
<label for="childUnder2"> Number of Children aged 2 or less </label>
<select name="childUnder2" id="childUnder2" onchange="getTotal(this)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>https://stackoverflow.com/questions/ask?title=auto%20calculate%20values%20onclick#
<label for="pricing"> X £FREE</label>
<br>
<br>
<!--SECOND CLASS that takes the value entered and * by the ticket price for a child ages 3-10. Price is £10 * Number of Tickets -->
<label for="childBox1"> Number of Children aged 3-10</label>
<select name="childBox1" id="childBox1" class="childBox1" onchange="getTotal(this)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<label for="pricing"> X £10</label>
<br>
<br>
<!--EDIT CLASS that takes the value entered and * by the ticket price for a child ages 11-16. Price is £13 * Number of Tickets -->
<label for="childBox2"> Number of Children aged 11-16</label>
<select name="childBox2" id="childBox2" class="childBox2" onchange="getTotal(this)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<label for="pricing"> X £13</label>
<br>
<br>
<!--If checked, the priced is double from that of a single ticket. Total price is * 2. -->
<input type="checkbox" name="rtnJourney" id="rtnJourney" value="2" onchange="getChecked(this)">Return Journey - If unchecked, price is halved
<br> Total:
<input type="text" id="totalCost" name="totalCost">
</form>
</body>
</html>
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 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
}
});
This question already has answers here:
Remove an option once it is selected in previous dropdowns
(2 answers)
Closed 3 years ago.
Thanks in advance for any help!
I have five select elements on the same form, and with the same options. I would like to have any selected option be removed from the other four select elements when the user clicks on them. I'm hoping to use a simple JS for this. Any advice would be great. Thanks!
This is what I have tried so far
JS:
<script>
function removeSelected(obj){
var sel1= document.getElementsByName('program1');
var sel2= document.getElementsByName('program2');
var sel3= document.getElementsByName('program3');
var sel4= document.getElementsByName('program4');
var sel5= document.getElementsByName('program5');
obj.remove(sel1.selectedIndex);
obj.remove(sel2.selectedIndex);
obj.remove(sel3.selectedIndex);
obj.remove(sel4.selectedIndex);
obj.remove(sel5.selectedIndex);
}
</script>
Where "program1, program2, etc." is the name of each select element
HTML:
<label for= "cName" class= "floatLabel">Please Select A Program<span>*</span></label>
<select name="program1" class="floatCtrl" id="cName" required="required" onchange="document.getElementById('program1_text').value=this.options[this.selectedIndex].text" onfocus=" removeSelected(this)">
<option value="" selected> </option>
<option value="1"> Break Dancing 7/2/2013 $40.00</option>
<option value="2"> Guitar 7/10/2013 $40.00</option>
<option value="3"> Drums 7/12/2013 $40.00</option>
<option value="4"> Drawing 6/19/2013 $78.00</option>
<option value="5"> Watercolor Painting 6/19/2013 $78.00</option>
<option value="6"> Kids Art 8/7/2013 $30.00</option>
<option value="7"> Book Making 6/12/2013 $40.00</option>
<option value="8"> Writing 6/25/2013 $50.00</option>
<option value="9"> Dog Obedience 6/5/2013 $45.00</option>
<option value="10"> Skateboarding 7/30/2013 $40.00</option>
<option value="11"> Dodgeball 8/7/2013 $5.00</option>
<option value="12"> Jumprope 8/6/2013 $25.00</option>
<option value="13"> Swimming 6/2/13 $40.00</option>
<option value="14"> Games 7/2/2013 $20.00</option>
<option value="15"> Tennis 1 6/18/2013 $30.00</option>
<option value="16"> Tennis 2 6/25/2103 $30.00</option>
<option value="17"> Tennis 3 7/2/2013 $25.00</option>
<option value="18"> Tennis 4 7/16/2013 $25.00</option>
<option value="19"> Tennis 5 7/23/2013 $35.00</option>
<option value="20"> Tumbling 5/23/2013 $25.00</option>
<option value="21"> Backyard Discovery 7/20/2013 $5.00</option>
<option value="22"> Applegate Discovery 7/27/2013 $10.00</option>
<option value="23"> Mountain Adventure 8/3/2013 $10.00 </option>
</select>
<input type="hidden" name="program1_text" id="program1_text" value="" />
I'm trying to call removeSelected(this) in the onfocus event.
HTML
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Javascript
var options = document.getElementsByTagName("option");
for(var i = 0; i < options.length; i++){
options[i].onclick = function(){
var value = this.value;
console.log(value);
for(var x = 0; x < options.length; x++){
if(options[x].value == value){
options[x].parentNode.removeChild(options[x]);
}
}
}
}
Example http://jsfiddle.net/stJqd/