Select標籤下拉式清單二級聯動級聯執行個體代碼

Select標籤下拉式清單二級聯動級聯執行個體代碼

 這篇文章主要介紹了Select標籤下拉式清單二級聯動級聯執行個體代碼,需要的朋友可以參考下

首先從伺服器端，綁定下拉式清單，二級下拉的text命名按照一定規則加上一級下拉的ID。

代碼如下:

var options=new Array();

    $(document).ready(function(){

        //二級聯動

        $('#ddlPages').children('option').each(function(i){

            options[i]='<option value="'+$(this).val()+'">'+$(this).text()+'</option>';

        });//將option列表放到數組裡

        $('#ddlPages option:gt(0)').remove();    //清楚下拉

        $('#ddlSubsystems').bind('change',function(){        //註冊事件

            var systemname=$('#ddlSubsystems option:selected').text();

            for(var j=0;j<options.length;j++){

                $('#ddlPages').append(options[j]);

            }    //option列表先初始化

            $('#ddlPages option:gt(0)').each(function(i){    //遍曆排除

                var textname=$(this).text();

                var index=textname.indexOf('-'+systemname);

                if(index<0){

                    $(this).remove();

                }else{

                    $(this).text(textname.substring(0,index));

                }

            });

            $('#ddlPages').val(0);                            //預設選中第一行

        });

    });