How To Select Unique Values From Multiple Dropdown Lists Using Javascript?
Solution 2:
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.
<selectname="hssub1"id="hssub1"><optionvalue=null>Select</option> //added default option
<optionvalue="1">Bengali</option><optionvalue="2">English</option><optionvalue="3">Hindi</option><optionvalue="4">Physics</option><optionvalue="5">Chemistry</option><optionvalue="6">Mathematics</option></select><selectname="hssub2"id="hssub2"><optionvalue=null>Select</option><optionvalue="1">Bengali</option><optionvalue="2">English</option><optionvalue="3">Hindi</option><optionvalue="4">Physics</option><optionvalue="5">Chemistry</option><optionvalue="6">Mathematics</option></select><selectname="hssub3"id="hssub3"><optionvalue=null>Select</option><optionvalue="1">Bengali</option><optionvalue="2">English</option><optionvalue="3">Hindi</option><optionvalue="4">Physics</option><optionvalue="5">Chemistry</option><optionvalue="6">Mathematics</option></select><selectname="hssub4"id="hssub4"><optionvalue=null>Select</option><optionvalue="1">Bengali</option><optionvalue="2">English</option><optionvalue="3">Hindi</option><optionvalue="4">Physics</option><optionvalue="5">Chemistry</option><optionvalue="6">Mathematics</option></select><selectname="hssub5"id="hssub5"><optionvalue=null>Select</option><optionvalue="1">Bengali</option><optionvalue="2">English</option><optionvalue="3">Hindi</option><optionvalue="4">Physics</option><optionvalue="5">Chemistry</option><optionvalue="6">Mathematics</option></select><selectname="hssub6"id="hssub6"><optionvalue=null>Select</option><optionvalue="1">Bengali</option><optionvalue="2">English</option><optionvalue="3">Hindi</option><optionvalue="4">Physics</option><optionvalue="5">Chemistry</option><optionvalue="6">Mathematics</option></select><divid="notification"></div><buttontype="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');
functiongetOthers(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;
}
functioncheckUnique(){
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 timeif(values.length < 6){
notify.innerText = 'select all six';
returnfalse;
}
notify.innerText = '';
returntrue;
}
A fiddle: http://jsfiddle.net/p699m9x7/
Solution 3:
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 nulldocument.getElementById("notification").innerHTML = "Select in all lists to continue"; // if null print this
}elseif(othercodes[i] == hssubcode){
document.getElementById("submit").setAttribute("disabled","disabled");
document.getElementById("notification").innerHTML = elt.options[elt.selectedIndex].text + " Subject Already Choosen!";
returnfalse;
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;
<bodyonload="checkUnique('hssub1');">I think this will help you to continue with minimal changes to your existing code
Solution 4:
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.
<selectclass='abc'name="hssub1"id="hssub1"onchange="checkUnique(this.id);"><optionvalue="null">Select One</option><optionvalue="1">Bengali</option><optionvalue="2">English</option><optionvalue="3">Hindi</option><optionvalue="4">Physics</option><optionvalue="5">Chemistry</option><optionvalue="6">Mathematics</option></select><selectclass='abc'name="hssub2"id="hssub2"onchange="checkUnique(this.id);"><optionvalue="null">Select One</option><optionvalue="1">Bengali</option><optionvalue="2">English</option><optionvalue="3">Hindi</option><optionvalue="4">Physics</option><optionvalue="5">Chemistry</option><optionvalue="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 valueAnd 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.
Solution 5:
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:
functioncheckUnique(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.
Post a Comment for "How To Select Unique Values From Multiple Dropdown Lists Using Javascript?"