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]);
}
}
Related
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 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);
});
});
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/
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