Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Hộp chọn động
URL: https://www.javascriptbank.com/multiple-dynamic-combo-boxes.html
Đây là một đoạn mã JavaScript JavaScript khác để tạo hiệu ứng những hộp chọn chỉ xuất hiện giá trị khi hộp chọn trước đã có giá trị. Hơn nữa, với đoạn mã JavaScript này, bạn có thể thêm vào nhiều hộp chọn như bạn muốn.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Hộp chọn động
URL: https://www.javascriptbank.com/multiple-dynamic-combo-boxes.html
<script language="JavaScript" type="text/javascript"><!--/**** Multiple dynamic combo boxes*** by Mirko Elviro, 9 Mar 2005*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)******Please do not remove this comment*/// This script supports an unlimited number of linked combo boxed// Their id must be "combo_0", "combo_1", "combo_2" etc.// Here you have to put the data that will fill the combo boxes// ie. data_2_1 will be the first option in the second combo box// when the first combo box has the second option selected// first combo boxdata_1 = new Option("1", "$");data_2 = new Option("2", "$$");// second combo boxdata_1_1 = new Option("11", "-");data_1_2 = new Option("12", "-");data_2_1 = new Option("21", "--");data_2_2 = new Option("22", "--");data_2_3 = new Option("23", "--");data_2_4 = new Option("24", "--");data_2_5 = new Option("25", "--");// third combo boxdata_1_1_1 = new Option("111", "*");data_1_1_2 = new Option("112", "*");data_1_1_3 = new Option("113", "*");data_1_2_1 = new Option("121", "*");data_1_2_2 = new Option("122", "*");data_1_2_3 = new Option("123", "*");data_1_2_4 = new Option("124", "*");data_2_1_1 = new Option("211", "**");data_2_1_2 = new Option("212", "**");data_2_2_1 = new Option("221", "**");data_2_2_2 = new Option("222", "**");data_2_3_1 = new Option("231", "***");data_2_3_2 = new Option("232", "***");// fourth combo boxdata_2_2_1_1 = new Option("2211","%")data_2_2_1_2 = new Option("2212","%%")// other parameters displaywhenempty="" valuewhenempty=-1 displaywhennotempty="-select-" valuewhennotempty=0function change(currentbox) {numb = currentbox.id.split("_");currentbox = numb[1]; i=parseInt(currentbox)+1// I empty all combo boxes following the current one while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) && (document.getElementById("combo_"+i)!=null)) { son = document.getElementById("combo_"+i); // I empty all options except the first one (it isn't allowed) for (m=son.options.length-1;m>0;m--) son.options[m]=null; // I reset the first option son.options[0]=new Option(displaywhenempty,valuewhenempty) i=i+1 }// now I create the string with the "base" name ("stringa"), ie. "data_1_0"// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill stringa='data' i=0 while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) && (document.getElementById("combo_"+i)!=null)) { eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex") if (i==currentbox) break; i=i+1 }// filling the "son" combo (if exists) following=parseInt(currentbox)+1 if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) && (document.getElementById("combo_"+following)!=null)) { son = document.getElementById("combo_"+following); stringa=stringa+"_" i=0 while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) { // if there are no options, I empty the first option of the "son" combo // otherwise I put "-select-" in it if ((i==0) && eval("typeof("+stringa+"0)=='undefined'")) if (eval("typeof("+stringa+"1)=='undefined'")) eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)") else eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)") else eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)") i=i+1 } //son.focus() i=1 combostatus='' cstatus=stringa.split("_") while (cstatus[i]!=null) { combostatus=combostatus+cstatus[i] i=i+1 } return combostatus; }}//--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><form><select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;"><option value="value1">-select-</option><option value="value2">1</option><option value="value3">2</option></select><BR><BR><select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;"><option value="value1"> </option></select><BR><BR><select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;"><option value="value1"> </option></select><BR><BR><select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;"><option value="value1"> </option></select></form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->