js改变树形框属性

JavaScript023

js改变树形框属性,第1张

首先说树形结构,国内有个开源的js控件叫zTree,支持复选。

然后下拉框你可能需要自己做一个(html输入框+右边的一个图标按钮)。

最后,用一个隐藏的div把树形结构包起来,这个div设置成绝对定位,在下拉框右侧选择按钮的单击事件处理函数里,显示这个隐藏的div,并把它的位置设置成在下拉框下面就行了。

思路就是这样,要么楼主可以找找有没有其他更现成的控件,extjs4我记得有类似的,但是他的复选功能不太符合中国习惯,也许现在的版本改好了,你可以查查试试看。

JSP中可以引用jquery控件来制作树形选择框。

其实就是联动下拉框,参考实现代码:

<!DOCTaYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

    <title></title>

    <meta name="keywords" content=" keywords" />

    <meta name="description" content="description" />

</head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">

    body{font-size:13px}

    .clsInit{width:435pxheight::35pxline-height:35pxpadding-left:10px}

    .clsTip{padding-top:5pxbackground-color:#eeedisplay:none}

    .btn{border:solid 1px #666padding:2pxwidth:65pxfloat:rightmargin-top:6pxmargin-right:6pxfilter:progid:DXImageTransform.Mcrosoft.Gradient(GraientType=0,StartColorStr=#FFFFFF,EndColorStr=#ECE9D8)}

</style>

<body>

<script type="text/javascript">

    $(function(){

        function objInit(obj){

            return $(obj).html('<option>请选择</option>')

        }

        var arrData={

            厂商1:{品牌一:'型号1-1-1,型号1-1-2',

                    品牌二:'型号1-2-1,型号1-2-2'},

            厂商2:{品牌一:'型号2-1-1,型号2-1-2',

                    品牌二:'型号2-2-1,型号2-2-2'},

            厂商3:{品牌一:'型号3-1-1,型号3-1-2',

                    品牌二:'型号3-2-1,型号3-2-2'}

        }

        $.each(arrData,function(pF){

            $('#selF').append('<option>'+pF+'</option>')

        })

        $('#selF').change(function(){

            objInit('#selT')

            objInit('#selC')

            $.each(arrData,function(pF,pS){

                if($('#selF option:selected').text()==pF){

                    $.each(pS,function(pT,pC){

                        $('#selT').append('<option>'+pT+'</option>')

                    })

                    $('#selT').change(function(){

                        objInit('#selC')

                        $.each(pS,function(pT,pC){

                            if($('#selT option:selected').text()==pT){

                                $.each(pC.split(","),function(){

                                    $('#selC').append('<option>'+this+'</option>')

                                })

                            }

                        })

                       

                    })

                }

            })

        })

    })

</script>

<div class="clsInit">

厂商:<select id="selF"><option>请选择</option></select>

    品牌:<select id="selT"><option>请选择</option></select>

    型号:<select id="selC"><option>请选择</option></select>

    <input type="button" value="查询" id="Button1" class="btn" />

</div>

<div class="clsInit" id="divTip"></div>

</body>

</html>

效果: