頁面上的二級聯動

  

                    <div class="log-right height4" >
                        <input type="text" id="appliSta" disabled="disabled" value="所處階段" />
                        <div class="content">
                           <select id="ajscjd">
                
                            </select>
                        </div>
                    </div>
                </div>       
                <div class="log-list reg-list first">       
                    <div class="log-right height4">
                            <input type="text" id="Domination" value="管轄機關"  disabled="disabled" />
                            <div class="content">
                                <select id="gxjg">
                                    <option value="">請選擇</option>                      
                                </select>    
                            </div>       
                        </div>   

                  </div>



 
  $(function(){

var caseStatus = [
                          {   "id" : "300",
                              "name" : "偵查一段" ,
                              "demotion" : [
                                      {    
                                          "id" : "500",            
                                      "name" : "公安局"                                                                        
                                      },
                                      {
                                          "id" : "508",
                                      "name" :"檢察院"
                                      }
                              ]
                          },
                          {
                              "id" : "301",
                              "name" : "審查二段" ,
                              "demotion" : [    
                                     
                                      {    
                                          "id" : "512",            
                                      "name" : "法院"                                                                            
                                      },
                                      {    
                                          "id" : "513",            
                                      "name" : "審查機構"
                                    }
                                ]
                          }
                        
                      ];        
            // 二級聯動    
            $("#ajscjd").change(function(){
                var ajscjd_index = $("#ajscjd option:selected").index();
                var gxjg = $("#gxjg");
          
                if(ajscjd_index > 0){
                    var demotion = caseStatus[ajscjd_index-1].demotion;
                    for(var i = 0 ; i < demotion.length ; i++){
                        gxjg.append("<option value='"+demotion[i].id+"'>"+demotion[i].name+"</option>");
                    }
                }
            });
            init();
            function init(){
                $("#ajscjd").append("<option>請選擇</option>");
                for(var i = 0 ; i < caseStatus.length ; i++){
                    $("#ajscjd").append("<option value='"+caseStatus[i].id+"'>"+caseStatus[i].name+"</option>");
                }
            }



});

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章