Jquery+json绑定带层次下拉框(select控件)

一、实现的效果图

二、主要代码

html代码

                <select id="pid" runat="server">
                    <option value="0" data="|0|">不选父级类</option>
                </select>

Jquery代码

       var html = [‘<option value="0">不选父级模块</option>‘];
            var data = eval(json.msg);
            var levelStr;
            for (var key in data) {
                var str = data[key].itemvalue;
                var _p = str.split("|")[2];
                var _c = data[key].pId;
                if (_p == _c) {
                    if (_p != "") {
                        levelStr = "┗━┻━";
                    }
                    else {
                        levelStr = "┗━";
                    }
                    html.push(‘<option value="‘ + data[key].id + ‘">‘ + levelStr + data[key].name + ‘</option>‘);
                }
                $("select[name=‘pid‘]").empty().append(html.join(‘‘));
            }

json格式字符串

"[{"id":31,"pId":0,"name":"新闻中心","itemvalue":"|0|"},{"id":51,"pId":31,"name":"企业快讯","itemvalue":"|0|31|"},{"id":52,"pId":31,"name":"企业公告","itemvalue":"|0|31|"},{"id":53,"pId":31,"name":"行业动态","itemvalue":"|0|31|" },{"id":91,"pId":31,"name":"新闻中心","itemvalue":"|0|31|"},{"id":93,"pId":31,"name":"企业快讯","itemvalue":"|0|31|"},{"id":94,"pId":31,"name":"企业公告","itemvalue":"|0|31|"},

{"id":54,"pId":0,"name":"关于盟友捌捌","itemvalue":"|0|"},{"id":55,"pId":54,"name":"企业概况","itemvalue":"|0|54|"},{"id":56,"pId":54,"name":"企业文化","itemvalue":"|0|54|"},{"id":57,"pId":54,"name":"企业发展","itemvalue":"|0|54|"}]"

Jquery+json绑定带层次下拉框(select控件)

时间: 2024-08-05 15:20:46

Jquery+json绑定带层次下拉框(select控件)的相关文章

Asp.net绑定带层次下拉框(select控件)

1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> 备注:查看源代码 4.后台代码 using System; using System.Data; using System.Web.UI.WebControl

IOS自制类似于下拉框的控件

最近做的有关物流的APP中,货物数量的单位需要在给定的范围选取(比如:吨.方.件),但ios没有类似Android中的下拉框,我就自己想了办法自制了一个,效果还算满意:以后项目组的本科小师妹会帮我一起做ios端的开发,在此表示感谢!!! 第一步:新建工程XiaLaKuang(名字比较俗,新建方法不再比比...) 第二步:操作main.storyboard ——>拖拽一个UIButton(命名Title为“吨”,background为“light gray”,Alignment中的Horizona

多选下拉框用户控件

多个控件组合为用户控件,实现多选 1.CSS文件 .MultDropList {display:inline-block;} .labelArea {vertical-align:super} .DropList {display:inline-block; height:20px;margin-top:5px;margin-left:2px;border:1px solid #ccc;  cursor:pointer; background:url(/UserControl/MultDropD

struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($("#textValue").val() == "") {3                 $("#errortip").html("<font color='#FF0000'>请输入查询内容</font>")

代教材之(用DIV+CSS定义漂亮下拉框select)

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>代教材之

如何写一套下拉刷新的控件?《MJRefresh原理浅析》(附Demo下载地址)

相信大家有很多人在做项目的时候都在使用MJRefresh 控件来实现下拉刷新的功能: MJRefresh经过不断的重构与更新迭代,现在不管是功能上还是代码结构上都是相当不错的,都是很值我们去学习的. 下面就是MJRefresh开源框架中中主要的一些类文件 MJRefresh主要的类文件 MJRefresh 的使用相信都难不倒大家 今天我主要想和大家分享一下MJRefresh的想法,因为我觉得这才是最重要的,献丑了,有理解的不对和不深入的地方,请大家多多点评哈! 试想,如果没有MJRefresh开

Atitit.ui控件---下拉菜单选择控件的实现select html

Atitit.ui控件---下拉菜单选择控件的实现select   html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& model的实现 Proj.vod2 <% List li=new ArrayList(); Map m=new HashMap (); m.put("lab","爱情"); m.put("v","1"); li.add(m)

cocos2d-html5 简易 下拉表单 控件

刚才在CH5的群里问了问  有没有大侠写过 下拉表单控件啊!  没人鸟窝 ,DZ老师表示非常伤心啊  ,于是乎  自己写一个把 共享给大家. 效果图上一个  仅仅实现了一个最最主要的控件  非常easy  别吐槽啊,以后有空我会完好一下的,假设有朋友自愿帮忙完好一下就更好了. 有不论什么问题请加DZ老师的QQ 460418221 引擎版本号 : 2.2.2 原理:有空再写吧 源代码: /** * Created with JetBrains WebStorm. * User: Dz_Yang *

通用版的上拉刷新下拉加载控件

通用版的上拉刷新下拉加载控件 适用于各种控件实现上拉刷新,下拉加载的功能. 下载地址:http://www.devstore.cn/code/info/964.html 运行截图: