Wrote a jquery selector with a linkage select

such as provinces and cities, or other hierarchical relations can be used, first introduced jquery, and then define the data, the format is JSON data, pardepid refers to the parent ID

<script type= "Text/javascript" src= "/assets/js/jquery-1.8.1.min.js" ></script><script language= "  JavaScript "> var jsonlist = new Array (); var Jo = {"id": "One", "name": "Cutaneous Neurosurgery", "Pardepid": "5"};jsonlist.push (Jo); var Jo = {"id": "Ten", "Name": "Bone Neurosurgery", "Pardepid": "5"};jsonlist.push (Jo); var Jo = {"id": "8", "Name": "Pediatric non-respiratory medicine", "Pardepid": "9"};jsonlist.push (Jo); var Jo = {"id": "7", "Name": "Pediatric BU Digestive Medicine", "Pardepid": "3"};jsonlist.push (Jo); var Jo = {"id": "6", "Name": "Pediatric Digestive medicine", "Pardepid": "2"};jsonlist.push (Jo); var Jo = {"id": "9", "Name": "Respiratory Medicine", "Pardepid": "1"};jsonlist.push (Jo); var Jo = {"id": "4", "Name": "Surgical", "pardepid": "0"};jsonlist.push (jo); var Jo = {"id": "5", "Name": "Neurosurgery", "Pardepid": "4"};jsonlist.push (Jo); var Jo = {"id": "3", "Name": "Bu Gastroenterology", "Pardepid": "1"};jsonlist.push (Jo); var Jo = {"id": "2", "name": "Digestive Medicine", "Pardepid": "1"};jsonlist.push (Jo); var Jo = {"id": "1", "name": "Internal Medicine", "Pardepid": "0"};jsonlist.push (jo); for (Var i=0;i<jsonlist.length;i++) {//alert (jsonlist[i].id+ ', ' +jsonlist[i].name+ ', ' +jsonlist[i].pardepid); if (jsonlist[i].pardepid== ' 0 ') {$ ("#s1"). Append ("<option value=" +jsonlist[i].id+ ">" +jsonlist[i].name+ "</ Option> "); }} </script>

Then the HTML element is defined, because it is in the format of the Bui, so the class here except select is not specific to the selection, the other is the specific style. But it's not quite as close as this record.

<Divclass= "Row">            <Divclass= "Control-group Span16">                <labelclass= "Control-label"><s>*</s>Department</label>                <Divclass= "Controls">                    <inputname= "Keshi"ID= "Keshi"type= "hidden"value=""class= "Input-normal control-text">                </Div>                <spanID= "Dyna">                    <SelectID= "S1"class= "Dyclass" >                        <optionvalue="">Please select</option>                    </Select>                </span>            </Div>        </Div>

Then define a function to handle the linkage changes

<script language= "JavaScript" >     $(function(){         $("#dyna. Dyclass"). Live ("Change",function(){         varCur = $ ( This). Find ("option:selected"). Val (); varCurid = $ ( This). attr ("id"); varCurno = curid.substring (curid.length-1, Curid.lenth); //Alert ($ (this). attr ("id") + ', ' +curno ');         varTTT = $ (' # ' +curid+ ' ~. Dyclass ');         Ttt.remove (); varER =NewArray ();  for(vari=0;i<jsonlist.length;i++){             //alert (jsonlist[i].id+ ', ' +jsonlist[i].name+ ', ' +jsonlist[i].pardepid);             if(jsonlist[i].pardepid==cur) {Er.push ("<option value=" +jsonlist[i].id+ ">" +jsonlist[i].name+ "</option>"); }         }         varNextID = curno*1+1; if(er.length>0){             $(' #dyna '). Append ("<select id=s" +nextid+ "Class=dyclass" + "></select>"); $(' #s ' +nextid). Append ("<option value=" > Please select </option> "); }          for(vari=0;i<er.length;i++){             $(' #s ' +nextid). Append (Er[i]);                  }         }); $("#checkme"). Click (function(){             //var result =;Alert ($ (' #dyna select:last '). Find ("option:selected"). Val ()); })     })      </script>

After the Checkme is used for the final value, the effect is to build a tree can only select the leaf node, the selection to the leaf node behind the Select element is gone, if not the leaf node, the following will dynamically generate a SELECT element to choose. The point of attention is live and calculate the time *1+1, because the + number is interpreted by JavaScript as a connection symbol.
To streamline it, a shorter function solves the problem, or is quite satisfactory.

Wrote a jquery selector with a linkage select