Jquery Selector To Get All Dropdown Values, Issues For 2 Dropdowns
HTML Table Row#1 : Col 1 [Country DropDown] | Col #2 [StateDropDown] Row#2 : Col 1 [Country DropDown] | Col 2 [StateDropDown] table has 2 dropdownlists, for Country &a
Solution 1:
This is not a perfect solution which you just can copy/paste, but it's getting real close to what you want.
I made it as a whole function with 4 arguments:
- The real
table
, preferably anid
- The
td
, preferably aclass
- The hidden
table
to be cloned, preferably anid
- The new row
button
, preferably anid
Leaving you free to name your things like you want in the HTML and not caring about to fix the MULTIPLE places where those 4 are used in the script.
Now... This is just a good start. In fact, when user changes from "Country A" to "Country B", the state dropdown should be different!
This is the only issue I left... Since I don't know how you want to load those options.
It took me quit a lot time... I did it because I couldn't believe that such a "simple" request can be that complex... I had to crush it ;).
So here is the code (JS only) and a working CodePen demo.
var excusiveSelect = function(tableID,rowCLASS,dummyID,cloneBtn){ // Preferably ID, CLASS, ID, IDconsole.clear();
// Cloning functionvar cloneRow = function(){
var newrow = $(dummyID).find(rowCLASS).clone();
$(tableID).append(newrow);
refresh_mapping();
};
// Generate new lines
$(cloneBtn).on("click",cloneRow);
// ================================================================================ INITIALISATION// Selection mappingvar row_count;
var row_map = {};
// Get select clas names per columsvar col_count = $(rowCLASS).first().find("td").length;
var col_classes = [];
for(i=0;i<col_count;i++){
col_classes[i] = $(document).find(rowCLASS).first().find("select").eq(i).attr("class").split(" ").join(".");
}
console.log("SELECT CLASSES: "+JSON.stringify(col_classes));
var refresh_mapping = function(){
row_count = $(document).find(rowCLASS).length-1;
console.log("ROWCOUNT: "+row_count);
for(i=0;i<row_count;i++){
row_map["row_"+i] = {};
$(tableID).find(rowCLASS).eq(i).find("select").each(function(index){
// Get the select classes as object attribute.var thisClasses = $(this).attr("class").split(" ").join(".");
// For each row/select get the selected index.
row_map["row_"+i][thisClasses] = $(this)[0].selectedIndex;
});
}
console.log("VALUES MAPPING: "+JSON.stringify(row_map));
}
cloneRow();
// ================================================================================ FROM COLUMN #1
$(document).on("change","."+col_classes[0],function(){
console.log("\n======================================================= Country change\n");
refresh_mapping();
// Disables options already selected in ALL col_classes[1] where col_classes[0] is the samefor(i=0;i<row_count;i++){
if( ( row_map["row_"+i][col_classes[0]] == $(this)[0].selectedIndex )
&& ( $(this).closest(rowCLASS).index() != i ) ){
$(this).closest(rowCLASS).find("."+col_classes[1]+" option").eq( row_map["row_"+i][col_classes[1]] ).attr("disabled",true);
// Else enable the option if not self
}else{
if( $(this).closest(rowCLASS).index() != i ){
$(this).closest(rowCLASS).find("."+col_classes[1]+" option").eq(i).attr("disabled",false);
}
}
}
});
// ================================================================================ FROM COLUMN #2
$(document).on("change","."+col_classes[1],function(){
console.log("\n======================================================= State change\n");
console.clear();
refresh_mapping();
thisIndex = $(this)[0].selectedIndex; // Option selectedIndex
thisRowIndex = $(this).closest(rowCLASS).index(); // Row index// If same country...var thisCol0index = $(this).closest(rowCLASS).find("."+col_classes[0])[0].selectedIndex;
$(tableID).find("."+col_classes[1]).each(function(){
if( $(this).closest(rowCLASS).find("."+col_classes[0])[0].selectedIndex == thisCol0index ){
// Zap tout les disabled
$(this).find("option:not(:eq(0))").attr("disabled",false);
// Use mapping to disable based on col_classes[0]for(i=0;i<row_count;i++){
if( row_map["row_"+i][col_classes[0]] == thisCol0index ){
$(this).find("option").eq(row_map["row_"+i][col_classes[1]]).attr("disabled",true);
}
}
}
});
});
// ================================================================================
}
// Init!excusiveSelect("#CountryTable",".row","#DummyTable","#newRow"); // Preferably ID, CLASS, ID, ID
Post a Comment for "Jquery Selector To Get All Dropdown Values, Issues For 2 Dropdowns"