刚写的一个无限级下拉菜单，供观赏。。。


/*
* jquery select elements for xyy
*
* Copyright (c) 2009 xyy
* 
* jquery.select 操作类
*
*/(function(jQuery) {
    jQuery.fn.extend({
        /// <summary>
        /// select项的长度
        /// </summary>
        /// <param name="size" type="select Element">
        /// 1: size - 获取select Element对象项的长度
        /// </param>
        /// <returns type="int" />      
        size: function() {
            return jQuery(this).get(0).options.length;
        },
        /// <summary>
        /// getIndex索引
        /// </summary>
        /// <param name="getIndex" type="select Element">
        /// 1: getIndex - 获取select Element对象当前选定项的索引
        /// </param>
        /// <returns type="int" />
        getIndex: function() {
            return jQuery(this).get(0).selectedIndex;
        },
        /// <summary>
        /// getText文本值
        /// </summary>
        /// <param name="getText" type="select Element">
        /// 1: getText - 获取select Element对象当前选定项的文本值
        /// </param>
        /// <returns type="String" />
        getText: function() {
            return jQuery(this).size() == 0 ?
                         null :
                         jQuery(this).get(0).options[this.getIndex()].text;
        },
        /// <summary>
        /// getValue实际值
        /// </summary>
        /// <param name="getValue" type="select Element">
        /// 1: getValue - 获取select Element对象当前选定项的实际值
        /// </param>
        /// <returns type="int" />
        getValue: function() {
            return jQuery(this).size() == 0 ?
                        null :
                        jQuery(this).val();
        },
        /// <summary>
        /// setValue定位
        /// </summary>
        /// <param name="setValue" type="select Element">
        /// 1: setValue - 定位select Element对象项值为当前的实际值
        /// </param>
        setValue: function(value) {
            jQuery(this).get(0).value = value;
        },
        /// <summary>
        /// setText定位
        /// </summary>
        /// <param name="setText" type="select Element">
        /// 1: setText - 定位select Element对象项值为当前的文本值
        /// </param>
        setText: function(text) {
            var len = jQuery(this).size();
            for (var i = 0; i < len; i++) {
                if (jQuery(this).get(0).options[i].text == text) {
                    jQuery(this).get(0).options[i].selected = true;
                    break;
                }
            }
        },
        /// <summary>
        /// setIndex定位
        /// </summary>
        /// <param name="setIndex" type="select Element">
        /// 1: setIndex - 定位select Element对象项值为当前的索引值
        /// </param>
        setIndex: function(index) {
            var len = jQuery(this).size();
            (index >= len || index < 0) ?
                        false :
                        jQuery(this).get(0).selectedIndex = index;
        },
        /// <summary>
        /// isExist检测
        /// </summary>
        /// <param name="isExist" type="select Element">
        /// 1: isExist - 检测select Element对象项值是否存在
        /// </param>
        /// <returns type="Boolean" />
        isExist: function(value) {
            var isExist = false;
            var len = jQuery(this).size();
            for (var i = 0; i < len; i++) {
                if (jQuery(this).get(0).options[i].value == value) {
                    isExist = true;
                    break;
                }
            }
            return isExist;
        },
        /// <summary>
        /// addOptions添加项
        /// </summary>
        /// <param name="addOptions" type="select Element">
        /// 1: addOptions - 添加select Element对象项
        /// </param>
        addOptions: function(text, value) {
            !this.isExist(value) ?
                        jQuery(this).get(0).options.add(
                            new Option(text, value)
                            ) :
                        false;
        },
        /// <summary>
        /// removeItem删除项
        /// </summary>
        /// <param name="removeItem" type="select Element">
        /// 1: removeItem - 删除select Element对象项
        /// </param>
        removeItem: function(value) {
            if (jQuery(this).isExist(value)) {
                var len = jQuery(this).size();
                for (var i = 0; i < len; i++) {
                    if (jQuery(this).get(0).options[i].value == value) {
                        jQuery(this).get(0).remove(i);
                        break;
                    }
                }
            }
        },
        /// <summary>
        /// removeIndex删除索引项
        /// </summary>
        /// <param name="removeIndex" type="select Element">
        /// 1: removeIndex - 删除select Element对象索引项
        /// </param>
        removeIndex: function(index) {
            var len = jQuery(this).size();
            (index >= len || index < 0) ?
                        false :
                        jQuery(this).get(0).remove(index);
        },
        /// <summary>
        /// removeSelected删除选中项
        /// </summary>
        /// <param name="removeSelected" type="select Element">
        /// 1: removeSelected - 删除select Element对象选中项
        /// </param>
        removeSelected: function() {
            var index = jQuery(this).getIndex();
            this.removeIndex(index);
        },
        /// <summary>
        /// clear删除所有项
        /// </summary>
        /// <param name="clear" type="select Element">
        /// 1: clear - 删除select Element对象所有项
        /// </param>
        clear: function() {
            jQuery(this).get(0).options.length = 0;
        }
    });
})(jQuery);
/*
* jquery select elements for xyy
*
* Copyright (c) 2009 xyy
* 
* jquery.select.demo 无限下拉选项菜单
*
*/(function(jQuery) {
    jQuery.extend({
        manageSelect: function(o) {
            o = jQuery.extend({
                Containers: '',
                className: ''
            }, o);
            return new jQuery.SelectManager(o);
        },
        SelectManager: function(o) {
            this.opt = o;
        }
    });
    jQuery.extend(jQuery.SelectManager.prototype, {
        add: function(o) {            var opt = this.opt, id = o.id, $id = '#' + o.id, $this = this;
            jQuery(opt.Containers).append(
                '<lable>{0}</lable><select id="{1}" class="{2}"></select>'
                .format((o.title != undefined ? o.title : ''),
                        id,
                        opt.className
                    )
                );            $this.addDefault($this, $($id));            $this.addOptions($($id), o.data);            if (typeof o.change === 'boolean' && o.change) {
                var chObj = jQuery($id);
                chObj.change(function() {
                    var val = chObj.val(),
                            text = chObj.getText(),
                            index = chObj.getIndex();                    if (val == 0)
                        return;
                    else {
                        if (typeof o.changeUrl === 'string' &&
                                typeof o.changeUrl !== 'undefined') {
                            $this.ajaxData($this, o, val, text, index);
                        } else {
                            if (typeof o.callback === 'function')
                                o.callback(text, val, index);
                        }
                    }
                });
            }
        },
        addOptions: function(obj, data) {
            if (typeof data === 'object')
                for (var item in data)
                obj.addOptions(data[item].filedText, data[item].filedValue);
        },
        ajaxData: function($this, o, val, text, index) {
            var params = unescape(jQuery.param(o.changeData)).format(escape(val), escape(text));            jQuery.getJSON(o.changeUrl, params, function(data) {
                if (typeof o.changeID !== 'undefined') {
                    var obj = jQuery('#' + o.changeID);
                    obj.clear();
                    $this.addDefault($this, obj);
                    $this.addOptions(obj, data);
                }
                if (typeof o.callback === 'function')
                    o.callback(text, val, index, data);
            });
        },
        addDefault: function($this, $id) {
            $this.addOptions($($id), [{ filedValue: 0, filedText: '请选择'}]);
        }
    });
    jQuery.extend(String.prototype, {
        format: function() {
            if (arguments.length == 0)
                return null;
            var str = this;
            for (var i = 0; i < arguments.length; i++) {
                var re = new RegExp('\\{' + (i) + '\\}', 'gm');
                str = str.replace(re, arguments[i]);
            }
            return str;
        }
    });
})(jQuery);

解决方案 »

  1.   


    <!DOCTYPE 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>
        <title></title>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">google.load('jquery', '1.3.2');</script>
        <script src="jquery.select.demo.js" type="text/javascript"></script>
        <script type="text/javascript">        var data = [{ filedValue: 1, filedText: '张三' }, { filedValue: 2, filedText: '李四' }, { filedValue: 3, filedText: '王五'}];        $(function() {
                var s = $.manageSelect({ Containers: '#selectpos', className: '' }); //pos 存放容器，className 样式
                s.add({
                    id: 'select1', //创建select对象的ID
                    title: '一级', //左边的title
                    data: data, //json数据初始化select
                    change: true, //是否开启change事件，决定是否联动
                    changeUrl: 'getJson.ashx', //联动下一级数据请求地址
                    changeData: { id: '{0}', text: '{1}' }, //参数数据格式，用于后台获取参数的参数名称,{0}{1}为自动format对象
                    changeID: 'select2', //联动下一级select对象
                    callback: function(text, value, index, data) {//callback返回，选择的数据后的额外处理操作
                        //alert(text);
                    }
                });
                s.add({
                    id: 'select2',
                    title: '二级',
                    change: true,
                    changeID: 'select3',
                    changeUrl: 'getJson.ashx',
                    changeData: { id: '{0}', text: '{1}' },
                    callback: function(text, value, index, data) {
                        //alert(text);
                    }
                });
                s.add({
                    id: 'select3',
                    title: '三级',
                    change: true,
                    changeID: 'select4',
                    changeUrl: 'getJson.ashx',
                    changeData: { id: '{0}', text: '{1}' },
                    callback: function(text, value, index, data) {
                        //alert(text);
                    }
                });
                s.add({//最后一级联动
                    id: 'select4',
                    title: '四级',
                    change: true,
                    callback: function(text, value, index) {
                        //alert(text);
                    }
                });
                $('#Button1').click(function() {
                    $('#s').html(
                    'id:' + $('#select1').getValue() + '&nbsp;Text:' + $('#select1').getText() + '&nbsp;Index:' + $('#select1').getIndex()
                    + '<br/>id:' + $('#select2').getValue() + '&nbsp;Text:' + $('#select2').getText() + '&nbsp;Index:' + $('#select2').getIndex()
                    + '<br/>id:' + $('#select3').getValue() + '&nbsp;Text:' + $('#select3').getText() + '&nbsp;Index:' + $('#select3').getIndex()
                    + '<br/>id:' + $('#select4').getValue() + '&nbsp;Text:' + $('#select4').getText() + '&nbsp;Index:' + $('#select4').getIndex()
                    );
                });
            })
        </script></head>
    <body>
        <div id="selectpos">
        </div>
        <div id="s">
        </div>
        <input id="Button1" type="button" value="button" />
    </body>
    </html>
      

  2.   


    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Services;namespace Live.input.select
    {
        /// <summary>
        /// $codebehindclassname$ 的摘要说明
        /// </summary>
        [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        public class getJson : IHttpHandler
        {        public void ProcessRequest(HttpContext context)
            {
                string id = context.Server.UrlDecode(context.Request["id"].ToString());
                string text = context.Server.UrlDecode(context.Request["text"].ToString());
                context.Response.Write("[{ filedValue: 1, filedText: '张三' }, { filedValue: 2, filedText: '李四' }, { filedValue: 3, filedText: '王五'}]");
            }        public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }
      

  3.   

    应用就是HTML 和ashx全部都贴出来了
      

  4.   

    ashx 
    是什么啊,没接触过
      

  5.   


    不管JAVA ASP PHP还是.NET 都能用， 主要是AJAX JS处理方面，后台逻辑 自己构造就可以了。道理一样
      

  6.   

    跑不通，obj.addOptions(data[item].filedText, data[item].filedValue);Js错误，改为Jquery支持的ADD方法后又有别人的错误。
      

  7.   


    select没有addOptions方法，这是扩展出来的 
      

  8.   

    借个地儿，发个右键菜单的示例，基于prototype.js
    http://shice.heliohost.org/JsLib/Menu/DemoMenu.htm