如何用js实现select下拉框里是树形结构,可复选,select框中传复选所有值?如下图所示。

JavaScript028

如何用js实现select下拉框里是树形结构,可复选,select框中传复选所有值?如下图所示。,第1张

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

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

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

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

1、手动的改成树形结构,在二级opint标签的内容前面加入空格,形成树形的样子。

2、用div等标签做成模拟的select下拉框。

目前除此之外应该没有其它的办法能做到。

不要找我要代码,自己试试。

用jsp做树形下拉框可以用java自定义标签实现。

参考代码如下:

package com.moonNigh.tagSupport

import java.io.IOException

import javax.servlet.http.HttpServletRequest

import javax.servlet.jsp.JspException

import javax.servlet.jsp.JspWriter

import javax.servlet.jsp.tagext.TagSupport

/**

 *

 *

 * 树形下拉选择控件

 *

 */

public class SelectorTag extends TagSupport {

    private static final long serialVersionUID = 9878861374414215L

    

    //标签name属性

    private String name

    

    //所需图片的路径

    private String imgPath

    

    //所需javascript文件的路径

    private String scriptPaht

    

    //所需css文件的路径

    private String cssPath

    

    //项目的根路径

    private String rootPath

    

    //标签的value属性

    private String value

    private String text

    private String path

    

    /*

     * 标签的actionUrl属性

     * 联想查询结果数据通过向actionUrl属性指定的url请求得到

     */

    private String actionUrl

    

    private HttpServletRequest request=null

    

    

    public String getActionUrl() {

        return actionUrl

    }

    public void setActionUrl(String actionUrl) {

        this.actionUrl = actionUrl

    }

    public String getValue() {

        return value

    }

    public void setValue(String value) {

        this.value = value

    }

    public String getImgPath() {

        return imgPath

    }

    public void setImgPath(String imgPath) {

        this.imgPath = imgPath

    }

    public String getScriptPaht() {

        return scriptPaht

    }

    

    public void setScriptPaht(String scriptPaht) {

        this.scriptPaht = scriptPaht

    }

    public String getCssPath() {

        return cssPath

    }

    

    public void setCssPath(String cssPath) {

        this.cssPath = cssPath

    }

    

    

    public String getText() {

        return text

    }

    public void setText(String text) {

        this.text = text

    }

    public String getName() {

        return name

    }

    public void setName(String name) {

        this.name = name

    }

    public SelectorTag()

    {

        

    }

    

    

    /**

     * 初始化变量

     */

    private void initAbttributes()

    {

        request=(HttpServletRequest)this.pageContext.getRequest()

        rootPath=request.getContextPath()

        this.imgPath="/images/"

        this.scriptPaht="/js/"

        this.cssPath="/css/"

        

    }

    @Override

    public int doStartTag() throws JspException {

        initAbttributes()

        path=rootPath+"/jsp/tags/treeSelectorPage.jsp?id="+id+"&actionUrl="+actionUrl

        JspWriter out=pageContext.getOut()

        try {

            String tName=name

            //引入javascript文件

            out.println("<script type='text/javascript' charset='GB2312' src='"+rootPath+scriptPaht+"selector.js'></script>")

            

            //引入css文件

            out.println("<link rel='stylesheet' href='"+rootPath+cssPath+"selector.css' type='text/css' />")

            

            StringBuilder tag=new StringBuilder("<input type='text' ")

            tag.append("id='").append(id).append("'")

            tag.append(" value='").append(text==null?"":text).append("'")

            tag.append(" onclick='return showSelector(\"")

            tag.append(id).append("\",\"").append(path).append("\")' readonly>")

            tag.append("<input type='hidden' name='")

            .append(tName).append("' id='").append(id).append("_value")

            .append("' value='").append(value==null?"":value).append("'>")

            out.println(tag.toString())

        } catch (IOException e) {

            e.printStackTrace()

        }

        return SKIP_BODY

    }

    

    

}

运行结果: