I'm looping through each select with the class specialMenuCat and grabbing its value.
I'm using console.log() which shows the correct value but I'm not sure how to store this as a variable to use later.
<select class="specialMenuCat" name="menuCategory[]">
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="peach">Peach</option>
<option value="banana">Banana</option>
</select>
$('select.specialMenuCat').change(function(){
$('select.specialMenuCat').each(function(){
var catVal = $(this).val();
console.log(catVal);
});
});
An example of the console log is;
apples (5)
oranges (4)
peach (5)
banana (5)
I tried setting the vars first and then incrementing them but it didn't work. My attempt;
$('select.specialMenuCat').change(function(){
var apples = 0;
$('select.specialMenuCat').each(function(apples){
var catVal = $(this).val();
if(catVal == apples) { apples++; }
console.log(catVal);
});
});
initialize apple variable outside the onchange scope
because every time its re-initialize thats why value not increase
var apple = 0;
var apple = 0;
$('select.specialMenuCat').change(function() {
$('select.specialMenuCat').each(function() {
var catVal = $(this).val();
if (catVal == "apples") {
apple++;
}
console.log(catVal);
});
console.log(apple);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="specialMenuCat" name="menuCategory[]">
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="peach">Peach</option>
<option value="banana">Banana</option>
</select>
Declare an object and push value into it every change by increment in its occurrence
in result you can get the value by accessing the property name by example number of apples the should be like result['apple']
See belwon snippet :
$('select.specialMenuCat').change(function(){
$(".as-console").html("");
result = {};
$('select.specialMenuCat').each(function(){
if(!this.value) return;
val = result[this.value];
result[this.value] = typeof(val)== 'undefined' ? 1 : ++val;
});
console.log(result);
for (var prop in result) {
if (result.hasOwnProperty(prop)) {
console.log("number of "+ prop + " is: " + result[prop])
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="specialMenuCat" name="menuCategory[]">
<option value=""></option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="peach">Peach</option>
<option value="banana">Banana</option>
</select>
<select class="specialMenuCat" name="menuCategory[]">
<option value=""></option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="peach">Peach</option>
<option value="banana">Banana</option>
</select>
<select class="specialMenuCat" name="menuCategory[]">
<option value=""></option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="peach">Peach</option>
<option value="banana">Banana</option>
</select>
<select class="specialMenuCat" name="menuCategory[]">
<option value=""></option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="peach">Peach</option>
<option value="banana">Banana</option>
</select>
<select class="specialMenuCat" name="menuCategory[]">
<option value=""></option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>>
<option value="date">Dates</option>
</select>
<select class="specialMenuCat" name="menuCategory[]">
<option value=""></option>
<option value="melon">Melon</option>
<option value="oranges">Oranges</option>>
<option value="date">Dates</option>
</select>
the apples variable is inside your change function, so it won't exist outside your change function. This should work:
var apples = 0;
$('select.specialMenuCat').change(function(){
apples = 0; //reset, because you will start a new count
$('select.specialMenuCat').each(function(item){
var catVal = $(this).val();
if(catVal == "apples") { apples++; }
console.log(catVal);
});
});
function SomeOtherEvent(){
console.log(apples);
}
In the following Demo:
As suggested by Mr. McCrossan, create an Object Literal that has the fruit variables stored within. Keep your variables outside a function if you plan to increment/decrement the values. Referencing a value outside a function will create a closure which in turn causes a value to exist past the runtime of the function and thereby insuring a growing/shrinking value to build upon.
Register the select.fruit to the 'change' event
Get the value of the changed select with either this or event.target (in this Demo this is used).
Run the value through a switch() (I picked switch because it illustrates intentions very well).
On each matching case the value of the fruit property is incremented in the F Object as well as the corresponding output.
Demo
Details commented in Demo
/* Object literal stores each value
|| Note it is outside of a function
*/
var F = {
apples: 0,
oranges: 0,
peaches: 0,
bananas: 0
};
// Any change events that happen on a .fruit, callback runs
$('.fruit').on('change', fruitCount);
// This callback passes the Event Object (not used in this Demo)
function fruitCount(e) {
// "this" is the <select> currently changed
var currentPick = this.value;
switch (currentPick) {
/* if the value of "this" is "apples"...
|| increment the 'apples' property of the F Object
|| and then increment the value of output#A
|| But if it isn't apples fall onto the next case
*/ // Same applies to the other fruits
case 'apples':
F.apples++;
$('#A').val(F.apples);
break;
case 'oranges':
F.oranges++;
$('#O').val(F.oranges);
break;
case 'peaches':
F.peaches++;
$('#P').val(F.peaches);
break;
case 'bananas':
F.bananas++;
$('#B').val(F.bananas);
break;
default:
break;
}
}
select,
label,
output {
font: inherit;
}
label {
display: inline-block;
width: 8ch
}
<fieldset>
<legend>Fruit-O-Rama</legend>
<label>Apples: </label><output id='A'></output><br>
<label>Oranges: </label><output id='O'></output><br>
<label>Peaches: </label><output id='P'></output><br>
<label>Bananas: </label><output id='B'></output><br>
</fieldset>
<select class="fruit" name="menu0[]">
<option value=""></option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="peaches">Peaches</option>
<option value="bananas">Bananas</option>
</select>
<br>
<select class="fruit" name="menu1[]">
<option value=""></option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="peaches">Peaches</option>
<option value="bananas">Bananas</option>
</select>
<br>
<select class="fruit" name="menu2[]">
<option value=""></option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="peaches">Peaches</option>
<option value="bananas">Bananas</option>
</select>
<br>
<select class="fruit" name="menu3[]">
<option value=""></option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="peaches">Peaches</option>
<option value="bananas">Bananas</option>
</select>
<br>
<select class="fruit" name="menu4[]">
<option value=""></option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="peaches">Peaches</option>
<option value="bananas">Bananas</option>
</select>
<br>
<select class="fruit" name="menu5[]">
<option value=""></option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="peaches">Peaches</option>
<option value="bananas">Bananas</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
What I'm trying is something pretty basic, but I can't do it because the examples I see aren't anything similar to what I'm looking for.
There are 2 select, one of them you choose manually and the other dynamically changes depending on the value of the first one.
If the value of the first select is 1, that in the second one they only appear whose value is 1 as well.
I want to make it 100% JavaScript, I don't want any JQuery.
HTML.php
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>
JavaScript.js
function catch_value_types() {
var types_value_option = document.getElementById("types").value;
// What should I put here?
}
Loop through the options and hide if value doesnot match
function catch_value_types() {
const selectedValue = document.getElementById("types").value;
const select2 = document.getElementById("food");
Array.from(select2.options).forEach((node) => node.style.display = node.value === selectedValue ? "block": "none");
}
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option>Please Select</option>
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>
I want to get the information below the first <option> tag, I want to use jQuery/Cheerio to extract the information and transform the end result into a dictionary. It would ideally look like this
const info = {
'5.5':12773,
'6':12774,
}
And it goes on till the end.
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
Well, if you want to do all of this in jQuery, you can simply get all of the options of a select element with the jQuery selector ($('#attributesize-size_uswomen option')) and then perform a for loop ($.each) over it and fill your object easily.
So your final code should be something like this:
var opts = $('#attributesize-size_uswomen option:not(:first)');
var info = {};
$.each(opts, function(index, opt) {
info[$(opt).text()] = parseInt($(opt).val())
});
console.log(info);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
NOTE: Since the opt itself in the loop will be a regular object to use the jQuery functions over it you need to make a jQuery object with $() operand otherwise you can use it as regular NODE object and get its properties with javascript built-in properties like text, textContent or value.
UPDATE
Since you receive an error in the implementation with cheerio which does not support :first pseudo-selector, so you can select all of the options then exclude the first one in the object creation.
var opts = $('#attributesize-size_uswomen option');
var info = {};
$.each(opts, function(index, opt) {
if (index != 0)
info[$(opt).text()] = parseInt($(opt).val())
});
console.log(info);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
Or if you want to keep up with the supported Cheerio approach you use this one:
var info = {};
$('#attributesize-size_uswomen').children().slice(1).each(function() {
info[$(this).text()] = parseInt($(this).val())
});
console.log(info);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
Achieved using $("select option:not(:first)").each
CodePen
I have this Fiddle : https://jsfiddle.net/Ardee12/tL643rjq/3/
My problem is, I always get the same options at the third select from second select (vice versa), after I select an option from the first one. I need to stick for their own option (second and third select), but still have the populated function from their "rel" attribute. Can anyone please help me?
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
You need to treat each of the kidSelect individually. Loop through each of them at the beginning and store a clone of their own options in each instance.
Then when you change main select, filter each set separately
// store a clone of each kidSelect options on page load
$('.kidSelect').each(function() {
$(this).data('options', $(this).children().clone());
});
$(".mainSelect").change(function() {
var rel = this.options[this.selectedIndex].getAttribute('rel');
// filter each kids options and set in place
$('.kidSelect').html(function() {
return $(this).data('options').filter('[rel=' + rel + ']').clone();
});
// trigger the change on page load also to do initial filtering
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
I'm not entirely sure what you're trying to do but here is a guess.
I think you only want to effect the second select with the changes. For that you need to adjust your selector. It currently selects both selects.
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.js-kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.js-kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect js-kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
I am building an online registration form. In the web form, there are six dropdown lists which is as follows :
<select name="hssub1" id="hssub1" onchange="checkUnique(this.id);">
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
<select name="hssub2" id="hssub2" onchange="checkUnique(this.id);">
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
<select name="hssub3" id="hssub3" onchange="checkUnique(this.id);">
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
<select name="hssub4" id="hssub4" onchange="checkUnique(this.id);">
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
<select name="hssub5" id="hssub5" onchange="checkUnique(this.id);">
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
<select name="hssub6" id="hssub6" onchange="checkUnique(this.id);">
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
<div id="notification"></div>
<button type="button" name="submit" id="submit" onclick="return saveNext();">Save and Next</button>
Now I want the users to be able to select options which are mutually exclusive, i.e., the selection set from the six lists should contain unique values. To ensure this I devised the following JavaScript code:
function checkUnique(elementID) {
var elt = document.getElementById(elementID);
var hssubcode = document.getElementById(elementID).value;
var elementIDsuffix = parseInt(elementID.substring(5)) - 1;
// to make it compatible with array index
var othercodes = [
document.getElementById('hssub1').value,
document.getElementById('hssub2').value,
document.getElementById('hssub3').value,
document.getElementById('hssub4').value,
document.getElementById('hssub5').value,
document.getElementById('hssub6').value
];
for(var i=0; i<=5; i++){
if(i != elementIDsuffix){
if(othercodes[i] == hssubcode){
document.getElementById("submit").setAttribute("disabled","disabled");
// so that it stops form submission;
document.getElementById("notification").innerHTML = elt.options[elt.selectedIndex].text + " Subject Already Choosen!";
return false;
break;
} else {
document.getElementById("notification").innerHTML = "";
document.getElementById("submit").removeAttribute("disabled");
// so that it allows form submission again;
}
}
}
}
The above script fails when the user first selects say Bengali, then again Bengali, then again Bengali and finally changes the second choice. I can understand the problem in the code, but being a novice programmer, I am unable to think how to build up the required logic. Please help.
You could use an empty object as a dictionary and count how many occurrences there are for each value. If any value occurrs over 2 times, disable the submit:
function checkUnique(elementID) {
var elt = document.getElementById(elementID);
var valCounter = {};
var othercodes = [
document.getElementById('hssub1').value,
document.getElementById('hssub2').value,
document.getElementById('hssub3').value,
document.getElementById('hssub4').value,
document.getElementById('hssub5').value,
document.getElementById('hssub6').value
];
for(var i=0; i<=5; i++){
var c = valCounter[othercodes[i]] = (valCounter[othercodes[i]] || 0) + 1;
if(c > 1){
document.getElementById("submit").setAttribute("disabled","disabled");
// so that it stops form submission;
document.getElementById("notification").innerHTML = elt.options[elt.selectedIndex].text + " Subject Already Choosen!";
return false;
}
}
document.getElementById("notification").innerHTML = "";
document.getElementById("submit").removeAttribute("disabled");
// so that it allows form submission again;
}
First, I would suggest using a default option like "Select subject" whose value is "null" or 0 - something that can be easily discarded. This way there are no default selected values.
Second, I would highly recommend not putting the event handlers in your markup. It's a real mess to maintain that.
<select name="hssub1" id="hssub1">
<option value=null>Select</option> //added default option
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
<select name="hssub2" id="hssub2">
<option value=null>Select</option>
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
<select name="hssub3" id="hssub3">
<option value=null>Select</option>
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
<select name="hssub4" id="hssub4">
<option value=null>Select</option>
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
<select name="hssub5" id="hssub5">
<option value=null>Select</option>
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
<select name="hssub6" id="hssub6">
<option value=null>Select</option>
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
<div id="notification"></div>
<button type="button" name="submit" id="submit">Save and Next</button>
Here's the Javascript -fairly straightforward, but you can ask in case of any questions:
var selects = document.querySelectorAll('select'),
notify = document.getElementById('notification');
function getOthers(current){
var values = [];
for(var i=0;i<selects.length;i++){
if(selects[i].value!='null' && selects[i]!=current)
values.push(selects[i].value);
}
return values;
}
function checkUnique(){
if(this.value && getOthers(this).indexOf(this.value)>-1){
notify.innerText = 'You already selected that';
this.value = null;
}
}
for(var i=0;i<selects.length;i++)
selects[i].onchange = checkUnique;
document.getElementById('submit').onclick = function(){
var values = getOthers(); // will return all selected values this time
if(values.length < 6){
notify.innerText = 'select all six';
return false;
}
notify.innerText = '';
return true;
}
A fiddle: http://jsfiddle.net/p699m9x7/
First add new option to lists with an value you can easily recognize like this:
<select name="hssub1" id="hssub1" onchange="checkUnique(this.id);">
<option value="null">Select</option>
<option value="1">Bengali</option>
then add if condition before the conditions you have now and then the loop will be like this:
for(var i=0; i<=5; i++){
if(i != elementIDsuffix){
if(othercodes[i] === "null"){ //check whether anything is null
document.getElementById("notification").innerHTML = "Select in all lists to continue"; // if null print this
}else if(othercodes[i] == hssubcode){
document.getElementById("submit").setAttribute("disabled","disabled");
document.getElementById("notification").innerHTML = elt.options[elt.selectedIndex].text + " Subject Already Choosen!";
return false;
break;
} else{
document.getElementById("notification").innerHTML = "";
document.getElementById("submit").removeAttribute("disabled");
}
}
}
but with this at first time you enter the page the button will not disable. So for that call this function on body onload event;
<body onload="checkUnique('hssub1');">
I think this will help you to continue with minimal changes to your existing code
There's this JavaScript snippet on github. Just a 1.4 kB js file.
Just include jquery before including the script and you should be good to go.
https://github.com/akhilnaik/unique.js
You need to give a class for all the < select > tags you want to have unique values
Here I'm using class='abc' as example.
<select class='abc' name="hssub1" id="hssub1" onchange="checkUnique(this.id);">
<option value="null">Select One</option>
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
<select class='abc' name="hssub2" id="hssub2" onchange="checkUnique(this.id);">
<option value="null">Select One</option>
<option value="1">Bengali</option>
<option value="2">English</option>
<option value="3">Hindi</option>
<option value="4">Physics</option>
<option value="5">Chemistry</option>
<option value="6">Mathematics</option>
</select>
and so on .....
And call the constructor of Unique on window.onload like this
var k = new Unique('.abc','null');//u need to have a default null value
And thats it everything is taken care of.
The selected values will automatically be disabled.
Dont forget to include JQuery before including unique.js
Hope this helps.
I don't know if this fits your needs, but if you want to get a warning, if any value is already chosen, you could do it like that:
function checkUnique(elementID) {
var values = [];
var elements = document.getElementsByTagName('select');
for (var i=0, l=elements.length; i < l; i++) {
if (document.getElementById(elementID).value === elements[i].value && document.getElementById(elementID) != elements[i]) {
console.log('not unique');
}
}
}
Instead of console.log('not unique') you could do your warnings.
I have a form with 2 drop down lists on the same page using the same ids.
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
Not sure how to I change the JavaScript code so the second county drop down list functions same as the first one. The existing javascript and how it functions can be seen here:
http://jsfiddle.net/pfYEb/10/
You'll probably want to use class="country" instead of id="country" so that your selector will match both. (same for your id="county") In your jsfiddle, you'll also need to distinguish which county to change within your country change event. One easy way to do this is to use the index of the current element.
I've forked your jsfiddle here.
HTML
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
Relevant Javascript:
$('.country').change(function() {
var country = $(this).val(),
county = $('.county').eq($(".country").index(this)); // This matches the county
// Empty county dropdown
county.empty();
// Update dropdown with appropriate contents
if (country === '') {
county.append('<option value="">Select a country first...</option>');
} else {
$.each(counties[country], function(i, v) {
county.append('<option value="' + i + '">' + v + '</option>');
});
}
});
You can't really solve this querying by id. Element ID's have to be unique within a document by specification by the way. Your best shot, use classes instead.