14 April 2009
0 JavaScript code for ensuring that a selected item in a dropdown does not appear in other dropdown
Consider a series of dropdown.We need to ensure that the selection in any of the dropdown does not come in the other dropdowns. Here is the JavaScript code for ensuring that a selected item in a dropdown does not appear in other dropdown, Call the function onRowChange on change of the dropdown.
getMaxEditableRows is the number of dropdowns
allAttributesKeyArray is an array of all items in dropdown
function onRowChange (rowId){
for( var i=0; i<getMaxEditableRows(); i++) {
if(rowId==i)
continue;
var rowName = 'optAttr'+i;
var tempVal = document.getElementById(rowName).value;
document.getElementById(rowName).options.length = 0;
document.getElementById(rowName).options[0] = new Option("--Select--", '');
for(var j = 0; j <(allAttributesKeyArray.length); j++) {
var text = allAttributesKeyArray[j];
if (isSelectedInOthers(text,i))
continue ;
document.getElementById(rowName).options[1+count++] = new Option(text, text);
}
document.getElementById(rowName).value = tempVal;
}
}
for( var i=0; i<getMaxEditableRows(); i++) {
if(rowId==i)
continue;
var rowName = 'optAttr'+i;
var tempVal = document.getElementById(rowName).value;
document.getElementById(rowName).options.length = 0;
document.getElementById(rowName).options[0] = new Option("--Select--", '');
for(var j = 0; j <(allAttributesKeyArray.length); j++) {
var text = allAttributesKeyArray[j];
if (isSelectedInOthers(text,i))
continue ;
document.getElementById(rowName).options[1+count++] = new Option(text, text);
}
document.getElementById(rowName).value = tempVal;
}
}
getMaxEditableRows is the number of dropdowns
allAttributesKeyArray is an array of all items in dropdown
// checks whether the attribute is selected in other dropdowns or not
function isSelectedInOthers(text,rowId){
for( var i=0;i<getMaxEditableRows();i++) {
var rowName = 'optAttr'+i;
if(rowId==i)
continue;
if(document.getElementById(rowName) .value==text) {
return true;
}
}
return false;
}
The function is called on onChange of the dropdowns. The parameter rowId denotes which row was selected, i.e. which dropdown. The value selected in the dropdown is stored in a temporary variable – tempVal, after this the values in the dropdown is flushed by setting its length to zero. Again the dropdown is re-loaded with values from the allAttributesKeyArray. Before the actual setting another function isSelectedInOthers is called. The parameter ‘text’ denotes any value in the allAttributesKeyArray which will be compared with the values already selected. This function ensures that the value selected is not selected in other dropdowns. It returns true or false depending on this criterion. On basis of what isSelectedInOthers function returns the dropdown is populated with values other than one’s selected.
function isSelectedInOthers(text,rowId){
for( var i=0;i<getMaxEditableRows();i++) {
var rowName = 'optAttr'+i;
if(rowId==i)
continue;
if(document.getElementById(rowName) .value==text) {
return true;
}
}
return false;
}
Subscribe to:
Post Comments (Atom)
0 comments:
Please give your valuable comments.