One based on the jquery linkage drop-down box effect

The code is as follows

Copy Code

/* * Cascade dropdown Box Jqueyr plugin, V1.2 * Copyright, Leo.liu * This plugin includes 2 non-flush cascading dropdown box Plug-ins: * Plugin One: Cascadedropdowndata is not used in Ajax interaction with the server, you need to advance all the dropdown box data read out. Demo * Method One: var dataItem = [[' All ', '-1 ', ' 0 '], [' a001 ', ' a001 ', ' 0 '], [' a002 ', ' a002 ', ' 0 '], [' a003 ', ' a003 ', ' 0 '] , [' b001 ', ' b001 ', ' a001 '], [' b002 ', ' b002 ', ' a001 '], [' b003 ', ' b003 ', ' a002 '], [' b004 ', ' b004 ', ' a003 '] , [' c001 ', ' 001 ', ' b001 '], [' c002 ', ' 002 ', ' b001 '], [' c003 ', ' 003 ', ' b002 '], [' c004 ', ' 004 ', ' b003 ']]; $.cascadedropdownbind.bind (DataItem, {sourceid: ' Select1 ', Selectvalue: ' a001 ', Parentvalue: ' 0 ', Child: {sourceid: ' Select2 ', Selectvalue: ' b002 ', Child: {sourceid: ' Select3 ', Selectvalue: ' c002 '} } }); * This method has a flaw: a requires that the Drop-down box's value not be the same as the parent in the parent-child counterpart B) cannot set the full selection rule * * Method Two: var data = [[' All ', ' 0 '], [' a001 ', ' a001 '], [' a002 ', ' a002 '], [' a003 ', ' a003 ']]; var data2 = [[' All ', ' 0 ', ' 0 '], [' b001 ', ' b001 ', ' a001 '], [' b002 ', ' b002 ', ' a001 '], [' b003 ', ' b003 ', ' a002 '], [' b004 ', ' b00 4 ', ' a003 ']]; var data3 = [[' All ', ' 0 ', ' 0 '], [' c001 ', ' 001 ', ' b001 '], [' c002 ', ' 002 ', ' b001 '], [' c003 ', ' 003 ', ' b002 '], [' c004 ', ' 004 ', ' b003 ']]; $.cascadedropdownbind.bind (data, {sourceid: ' Select1 ', Selectvalue: ' a001 '}); $.cascadedropdownbind.bind (data2, {sourceid: ' Select2 ', Selectvalue: ' b002 ', parentid: ' Select1 '}); $.cascadedropdownbind.bind (data3, {sourceid: ' Select3 ', Selectvalue: ' c002 ', parentid: ' Select2 '}); * Method three See Cascadedropdownbind.bind content */ Jquery.extend ({ The data object of the Drop-down box Cascadedropdowndata:function () { Configuration Properties ******* This.removefirst = true; Do you want to remove the first item This.appentallvalue = '; Displays all items if the parent item's value is equal to this value This.sourceid = '; This dropdown box ID This.parentid = '; Parent dropdown Box ID This.items = []; The data of the item, the two-dimensional array, the form: [[' Text ', ' value ', ' parent ID '],......]; Values and parent IDs can be omitted This.selectvalue = '; Initialize the selected item This.parentvalue = null; Used to filter out the items needed for the group from a bunch of data, typically to bind the first Drop-down box Configuration Properties ******* The following are global variables that do not need to be set externally This.child = null; var currentdrop = null; This.bind = function () { Currentdrop = $ (' # ' + This.sourceid); This.clear (); Populating data Items This.fillitem (); Set the selection if (This.selectvalue) { Currentdrop.val (This.selectvalue); } Set the Change event for the parent Drop-down box This.setchange (); }; Clean Fill Items This.clear = function () { if (This.removefirst) { Currentdrop.empty (); } else { for (var i = currentdrop[0].options.length-1 i > 0; i--) { Currentdrop[0].options[i] = null; } } }; Populating data Items This.fillitem = function () { var _parentvalue = This.parentvalue; if (This.parentid) _parentvalue = $ (' # ' + This.parentid). Val (); var all = false; if (this.appentallvalue && _parentvalue = = this.appentallvalue) all = true; $.each (This.items, function (index, item) { var val = item.length > 1? ITEM[1]: item[0]; If value is not specified, replace with text if (all | | item.length <= 2 | | item[2] = = _parentvalue) {//If the length is less than 3, it is considered that there is no parent Drop-down box to populate all items Currentdrop.append (' <option value= ' + val + ' "> ' + item[0] + ' </option> '); } }); }; Set the Change event for the parent Drop-down box This.setchange = function () { if (This.parentid) { $ (' # ' + This.parentid). Bind (' Change ', this.change); } }; Parent dropdown Box Event callback function var _this = this; This.change = function () { _this.clear (); _this.fillitem (); Currentdrop.change (); }; }, Cascadedropdownbind: { Bind:function (data, setting) { var obj = new $.cascadedropdowndata (); $.extend (obj, setting); Obj.items = data; Obj.bind (); if (setting.child) { Setting.child.parentID = Setting.sourceid This.bind (data, setting.child); } } } }); /* * Plug-in two: Ajaxdropdowndata for each child drop-down box is post to the server to fetch data binding. * The best thing about the plug-in is that it will be used to achieve efficient data caching. * Note: The cached key value is not only the value of the parent Drop-down box, but a combination of values from the top-level Drop-down box to the current parent Drop-down box, in order to cope with the different children of the same parent dropdown box * For the same reason, the form that is sent back to the server in postback also contains the values of all the parent Drop-down boxes * Use method: var firstitems = null; You can also bind the data array of the first Drop-down box to this, or set to null without changing the Drop-down box. $.ajaxdropdownbind.bindtopdrop (' Select1 ', Firstitems, NULL, FALSE, ' Select2 '); $.ajaxdropdownbind.bindcallback (' Select2 ', NULL, FALSE, ' Select3 ', ' http://localhost:4167/GetDropDownData.ashx? Action=select1 '); $.ajaxdropdownbind.bindcallback (' Select3 ', NULL, FALSE, NULL, ' http://localhost:4167/GetDropDownData.ashx?action= Select2 '); $ (' #Select1 '). Change (); * Most importantly, cascading ID settings are not missing. Advanced usage See the contents of the $.ajaxdropdownbind.bindcallback method. */ Jquery.extend ({ This object is a linked list structure Ajaxdropdowndata:function () { Configuration Properties ******* This.sourceid = '; This dropdown box ID This.items = []; The data for this item, two-dimensional array, form: [[' Text ', ' value ', ' parent ID '],......]; Values and parent IDs can be omitted This.callback = null; callback function to get the next-level method, which receives 2 parameters: value, DropDownList the values selected by the parent Drop-down box, and an instance of itself This.childid = '; The associated child control ID This.removefirst = true; Do you want to remove the first option from this item This.selectvalue = '; This item initializes the selected value Configuration Properties ******* The following are system variables and methods **************************************************** This.childitem = []; A list of child objects for caching This.parentobj = null; Parent object This.canchange = true; This.clearitem = true; This.bind = function () { $.ajaxdropdownbind.binddata (this); }; This.binddata = function (setting) { $.extend (this, setting); $.ajaxdropdownbind.binddata (this); }; /* goes back to the root node, starting from the root node to cascade the object of the current correct drop-down box Because there is only one event in the dropdown box and the corresponding object has multiple, you need to go back to the root first, and start looking at the root */ This.getrightonchangeobj = function () { if (this.parentobj) Return THIS.PARENTOBJ.GETRIGHTONCHANGEOBJ (). childitem[$ (' # ' + This.parentObj.sourceID). Val ()]; Recursion Else return this; } }, Ajaxdropdownbind: { Currentdrop:null, _thisdata:null, Callbackpool: [], Clean Fill Items Clear:function () { if (_thisdata.removefirst) { Currentdrop.empty (); } else { for (var i = currentdrop[0].options.length-1 i > 0; i--) { Currentdrop[0].options[i] = null; } } }, Populating data Items Fillitem:function () { for (var i = 0; i < _thisdata.items.length; i++) { var val = _thisdata.items[i].length > 1? _THISDATA.ITEMS[I][1]: _thisdata.items[i][0]; If value is not specified, replace with text Currentdrop.append (' <option value= ' + val + ' "> ' + _thisdata.items[i][0] + ' </option> '); } Set the selection if (_thisdata.selectvalue) { Currentdrop.val (_thisdata.selectvalue); _thisdata.selectvalue = '; } }, Parameter data is the object of the currently changing Drop-down box Binddata:function (data) { _thisdata = data; Currentdrop = $ (' # ' + _thisdata.sourceid); The node itself, not the child if (_thisdata.clearitem) This.clear (); if (_thisdata.items) This.fillitem (); if (_thisdata.childid) { if (!currentdrop.data (' binded ')) {//To determine if the event has been bound, not bound Currentdrop.data (' binded ', true); var _firstchangeobj = _thisdata; Because there is only one event in the dropdown box, and the corresponding object has multiple, the object here is a bound object, not the correct object Currentdrop.bind (' Change ', function () { var rightchilditem = _firstchangeobj.getrightonchangeobj (). ChildItem; var thisvalue = $ (' # ' + _firstchangeobj.sourceid). Val (); Gets the value of the currently changing Drop-down box, note that you cannot replace it with Currentdrop because Currentdrop is also an old value if (Rightchilditem[thisvalue]) { Console.log (' cache '); Rightchilditem[thisvalue].bind (); Using cached data to bind } else { Console.log (' GetData '); A new instance, and establish a linked list relationship var dropdata = new $.ajaxdropdowndata (); Dropdata.sourceid = _firstchangeobj.childid; Dropdata.parentobj = _firstchangeobj; Rightchilditem[thisvalue] = Dropdata; Setting up caching if (_firstchangeobj.callback)//If there is a callback function called directly, otherwise call the system automatically generated functions _firstchangeobj.callback (Thisvalue, dropdata); callback function else { var callback = $.ajaxdropdownbind.callbackpool[dropdata.sourceid]; if (callback) Callback (Thisvalue, Dropdata); } } }); } if (_thisdata.canchange) Currentdrop.change (); } }, Bind First Level dropdown box Bindtopdrop:function (SourceID, items, Selectvalue, Removefirst, childID) { var mydrop = new $.ajaxdropdowndata (); Mydrop.sourceid = SourceID; Mydrop.items = items; if (!items | | items.length = = 0) Mydrop.clearitem = false; Mydrop.removefirst = Removefirst; Mydrop.selectvalue = Selectvalue; Mydrop.childid = childID; Mydrop.canchange = false; Mydrop.bind (); }, Bind Child Drop-down Box Bindcallback:function (SourceID, Selectvalue, Removefirst, childID, Parentposturl) { var callback = function (value, DropDownList) { var postdata = {}; var parentobj = dropdownlist.parentobj; while (Parentobj) { Postdata[parentobj.sourceid] = $ (' # ' + Parentobj.sourceid). Val (); Parentobj = Parentobj.parentobj; } $.getjson (Parentposturl + ' &jsoncallback=? ', PostData, function (data) { Dropdownlist.items = data; Dropdownlist.removefirst = Removefirst; Dropdownlist.selectvalue = Selectvalue; Dropdownlist.childid = childID; Dropdownlist.bind (); }); }; This.callbackpool[sourceid] = callback; } } });

HTML code

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <title> Encapsulation of Infinity-pole cascading dropdown box </title> <script type= "Text/javascript" src= "Http://test.fe.ecp.mic.cn/content/scripts/base/jquery.js" ></script > <style> Select { margin-left:10px; } Body { font-size:14px; Background-color: #CCCCCC; } Td { border:1px solid #FF6600; padding:5px; Text-align:left; } Input { width:80px; } Input[type=checkbox] { width:20px; } </style> <body> <form id= "Form1" runat= "Server" > <div> Encapsulation <div style= "margin:50px 0 50px 10px;" > Binding method: <select id= "selcase" ><option value= "1" > The first method </option> <option value= "2" > The second method </option> </select> <input type= "button" onclick= "Test ()" value= "binding"/> <div style= "margin:10px;" > <table cellpadding= "0" cellspacing= "0" > <tr> <td> First Drop-down Box: </td> <td> <input type= "text" id= "Tb1sel" value= "a002"/> Set the selected value of the current item </td> <td> </td> <td> </td> </tr> <tr> <td> The second Drop-down box: </td> <td> <input type= "text" id= "Tb2sel" value= ""/> Set the selected value of the current item </td> <td> <input type= "checkbox" id= "Cb2remove" value= ""/> Whether to remove the first item </td> <td> <input type= "text" id= "Tb2allvalue" value= "0"/> When the current value equals this value, the item is selected all </td> </tr> <tr> <td> The third Drop-down box: </td> <td> <input type= "text" id= "Tb3sel" value= ""/> Set the selected value of the current item </td> <td> <input type= "checkbox" id= "Cb3remove"/> Whether to remove the first item </td> <td> <input type= "text" id= "Tb3allvalue value="/> When the current value equals this value, the item is selected all </td> </tr> </table> </div> </div> Dropdown box Results:<div id= "Selcontainer" style= "margin:0px 0 50px 100px;" > </div> <script type= "Text/javascript" src= "/scripts/jquery.cascadedropdown-1.2.js" ></script> <script type= "Text/javascript" > $ (function () { Togglesetting (); $ (' #selCase '). Bind (' Change ', togglesetting); }); function togglesetting () { if ($ (' #selCase '). val () = = ' 1 ') $ (' Table tr '). Each (function (i, item) { $ ($ (item). FIND (' TD ') [3]). Hide (); }); Else $ (' Table tr '). Each (function (i, item) { $ ($ (item). FIND (' TD ') [3]). Show (); }); } function Test () { if ($ (' #selCase '). val () = = ' 1 ') Testcase1 (); Else Testcase2 (); } function Testcase1 () { $ (' #Select1 '). Remove (); $ (' #Select2 '). Remove (); $ (' #Select3 '). Remove (); $ (' #selContainer '). html (' <select id= "Select1" ><option value= "-1" > All </option></select> <select id= "Select2" ><option value= "-1" > All </option></select><select id= "Select3" > <option value= "-1" > All </option></select> "); var dataItem = [[' a001 ', ' a001 ', ' 0 '], [' a002 ', ' a002 ', ' 0 '], [' a003 ', ' a003 ', ' 0 '] , [' b001 ', ' b001 ', ' a001 '], [' b002 ', ' b002 ', ' a001 '], [' b003 ', ' b003 ', ' a002 '], [' b004 ', ' b004 ', ' a002 '], [' b005 ', ' b005 ', ' A003 '] , [' c001 ', ' 001 ', ' b001 '], [' c002 ', ' 002 ', ' b001 '], [' c003 ', ' 003 ', ' b002 '], [' c004 ', ' 004 ', ' b002 '], [' c005 ', ' 005 ', ' b00 3 '], [' c006 ', ' 006 ', ' b004 '], [' c007 ', ' 007 ', ' b004 '], [' c008 ', ' 008 ', ' b005 '] ]; $.cascadedropdownbind.bind (DataItem, {sourceid: ' Select1 ', Selectvalue: $ (' #tb1sel '). Val (), Parentvalue: ' 0 ', Removefirst:false, Child: {sourceid: ' Select2 ', Selectvalue: $ (' #tb2sel '). Val (), Removefirst: $ (' #cb2Remove '). attr (' checked '), Child: {sourceid: ' Select3 ', Selectvalue: $ (' #tb3sel '). Val (), Removefirst: $ (' #cb3Remove '). attr (' checked ')} } } ); } function Testcase2 () { $ (' #Select1 '). Remove (); $ (' #Select2 '). Remove (); $ (' #Select3 '). Remove (); $ (' #selContainer '). html (' <select id= "Select1" ></select><select id= "Select2" ></select> <select id= "Select3" ></select>); $ (' #selContainer '). html (' <select id= "Select1" ><option value= "0" > All </option></select>< Select Id= "Select2" ><option value= "0" > All </option></select><select id= "Select3" >< Option value= "0" > All </option></select> "); var data = [[' a001 ', ' a001 '], [' a002 ', ' a002 '], [' a003 ', ' a003 ']]; var data2 = [[' B001 ', ' b001 ', ' a001 '], [' b002 ', ' b002 ', ' a001 '], [' b003 ', ' b003 ', ' a002 '], [' b004 ', ' b004 ', ' a002 '], [' B00 5 ', ' b005 ', ' a003 ']]; var data3 = [[' C001 ', ' 001 ', ' b001 '], [' c002 ', ' 002 ', ' b001 '], [' c003 ', ' 003 ', ' b002 '], [' c004 ', ' 004 ', ' b002 '], [' c005 ', ' 005 ', ' b003 '], [' c006 ', ' 006 ', ' b004 '], [' c007 ', ' 007 ', ' b004 '], [' c008 ', ' 008 ', ' b005 ']]; $.cascadedropdownbind.bind (data, {sourceid: ' Select1 ', Selectvalue: $ (' #tb1sel '). Val (), removefirst:false}); $.cascadedropdownbind.bind (data2, {sourceid: ' Select2 ', Selectvalue: $ (' #tb2sel '). Val (), ParentID: ' Select1 ', Removefirst: $ (' #cb2Remove '). attr (' checked '), Appentallvalue: $ (' #tb2AllValue '). Val ()}); $.cascadedropdownbind.bind (data3, {sourceid: ' Select3 ', Selectvalue: $ (' #tb2sel '). Val (), ParentID: ' Select2 ', Removefirst: $ (' #cb3Remove '). attr (' checked '), Appentallvalue: $ (' #tb3AllValue '). Val ()}); } </script> </div> </form> </body>