Prevent selecting same value in three different dropdowns - javascript

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);
});
});

Related

JS autocalculate multiple fields for total

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>

Remove dropdown after it is selected in each table cell

I have a table, containing two rows.
In each td, my content is a select dropdown.
The image below has it all.
What I have to achieve is that I need to select an option from drop down of one td and remove that option from other tds.
Say for example I select a value abc from dropdown 1 in first td.
Then, value abc must be removed from all the other dropdowns in all tds.
Here is some code :
HTML :
<select id="sameidforalltds"><option> abc </option><option> def </option>/select>
And the jQuery :
var getAllSelect = $("#Tablelayout_2").find('select');
var selectDropdownValue = $(this).find($("option:selected").val());
if(!($(getAllSelect).has(selectDropdownValue)))
{
$('select').remove(selectDropdownValue);
}
But this doesnt seem to work.
Kindly advice where I am wrong.
Try this example
Html
<select class="ddl">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>
<select class="ddl">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>
<select class="ddl">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>
<select class="ddl">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>
<select class="ddl">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>
Script
$('.ddl').change(function(){
if($(this).val()!="0") {
$('select[class="ddl"]').not($(this)).find('option[value="'+$(this).val()+'"]').remove();
}
})
Working Fiddle
This will help you.
Here's a plain vanilla solution, just in case anybody is interested:
DEMO:
JSFiddle
HTML
<table id='TableLayout_2'>
<tr>
<td><select onchange='change(this, 0)'><option>abc</option><option>def</option><option>ghi</option></select></td>
<td><select onchange='change(this, 1)'><option>abc</option><option>def</option><option>ghi</option></select></td>
<td><select onchange='change(this, 2)'><option>abc</option><option>def</option><option>ghi</option></select></td>
</tr>
</table>
JavaScript
function change(current, index) {
var value = current.value;
var selects = document.getElementById('TableLayout_2').getElementsByTagName('SELECT');
for (var i = 0 ; i < selects.length ; i++){
if (i === index)
continue; // skip current select
var toRemove = -1;
for (var j = 0 ;j < selects[i].options.length ; j++) {
var text = selects[i].options[j].text;
if (text == value)
toRemove = j;
}
if (toRemove > -1)
selects[i].removeChild(selects[i][toRemove]);
}
}

How to calculate day difference using Angular.js/Javascript

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>

hide dropdown option on change of another dropdown option

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>

How to remove an option from select element after it's been selected in another select element with javascript [duplicate]

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/

Categories

Resources