<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="public/bootstrap.css" rel="stylesheet">
<link rel="icon" href=public/siyecao.png>
<script src="public/jquery-1.12.4.js" type="text/javascript"></script>
<script src="public/bootstrap.js" type="text/javascript"></script>
<title>JQUERY</title>
<script type="text/javascript">
var option = [{‘id‘:‘1‘,‘areaname‘:‘北京‘,‘children‘:[{‘id‘:‘1.1‘,‘areaname‘:‘东城区‘,‘children‘:[{‘id‘:‘1.1.1‘,‘areaname‘:‘东城区1‘,‘children‘:[{‘id‘:‘1.1.1.1‘,‘areaname‘:‘东城区2‘}]}]}]},
{‘id‘:‘2‘,‘areaname‘:‘天津‘,‘children‘:[{‘id‘:‘2.1‘,‘areaname‘:‘河东区‘,‘children‘:[{‘id‘:‘2.1.1‘,‘areaname‘:‘河东区1‘}]}]},
{‘id‘:‘3‘,‘areaname‘:‘河北‘,‘children‘:[{‘id‘:‘3.1‘,‘areaname‘:‘宁河县‘,‘children‘:[{‘id‘:‘3.1.1‘,‘areaname‘:‘宁河县1‘}]}]},
{‘id‘:‘4‘,‘areaname‘:‘山西‘,‘children‘:[{‘id‘:‘4.1‘,‘areaname‘:‘太原市‘,‘children‘:[{‘id‘:‘4.1.1‘,‘areaname‘:‘太原市1‘}]}]},
{‘id‘:‘5‘,‘areaname‘:‘辽宁‘,‘children‘:[{‘id‘:‘5.1‘,‘areaname‘:‘沈阳市‘,‘children‘:[{‘id‘:‘5.1.1‘,‘areaname‘:‘沈阳市1‘}]}]},
{‘id‘:‘6‘,‘areaname‘:‘辽陆‘,‘children‘:[{‘id‘:‘6.1‘,‘areaname‘:‘辽陆1‘,‘children‘:[{‘id‘:‘6.1.1‘,‘areaname‘:‘辽陆11‘}]},{‘id‘:‘6.2‘,‘areaname‘:‘辽陆2‘,‘children‘:[{‘id‘:‘6.2.1‘,‘areaname‘:‘辽陆22‘}]}]},
];
$(document).ready(function(){
clickSelect(option);
//给定json文档，以children为键写子层次的下拉类容,name取名si[],clss取名s[],给定json文件自动生成多下拉菜单
//____________________________________________________________________________________________________
function clickSelect(c){ //|
select1 = $(‘select[name="s1\[\]"]‘); //|
$.each(c,function(k,v){ //|
select1.append(‘<option value=‘+v.id+‘>‘+v.areaname); //|
}); //|
kkk(c); //|
select1.parent().on(‘change‘,‘select[class="s\[\]"]‘,function(){ //|
kkk(c,$(this)); //|
}); //|
}; //|
function kkk(c,s=select1){ //|
$(s).nextAll().remove(); //|
var id = s.val(); //|
var name = s.prop(‘name‘);var start = name.indexOf(‘s‘)+1;var stop = name.indexOf(‘[‘); //|
var nameid = parseInt(name.substring(start,stop)); //|
var rankid = id.split(‘.‘); //|
$.each(rankid,function(K1,v1){ //|
if(K1==0) kareak = c; //|
$.each(kareak,function(k,v){ //|
if(v.id.split(‘.‘)[v.id.split(‘.‘).length-1]==v1){ //|
kareak = v.children; //|
if(rankid.length-1==K1){ //|
var a = v; //|
for(var ilv=0;ilv<=1000;ilv++){ //|
if(a.children){ var a = a.children[0];} //|
else break; //|
}; //|
for(var i=nameid+1;i<=ilv+nameid;i++){ //|
var m = "\$(‘select[name=\"s"+i+"\[\]\"]‘)"; //|
eval(‘select‘+(i-1)).after(‘<select class="s[]" name="s‘+i+‘[]">‘); //|
eval(‘select‘+i+‘=‘+m); //|
}; //|
for(var j=nameid+1;j<=ilv+nameid;j++){ //|
var s1 = ‘select‘+(j-1);var s2 = ‘select‘+j; //|
lll(c,eval(s1),eval(s2)); //|
}; //|
}; //|
}; //|
}); //|
}); //|
}; //|
function lll(c,a=select1,b=select2){ //|
b.empty(); //|
var id = a.val(); //|
var rankid = id.split(‘.‘); //|
var rank = id.split(‘.‘).length-1; //|
$.each(rankid,function(k1,v1){ //|
if(k1==0) lareal = c; //|
$.each(lareal,function(k,v){ //|
if(v.id.split(‘.‘)[v.id.split(‘.‘).length-1]==v1){ //|
lareal = v.children; //|
if(rankid.length-1==k1){ //|
$.each(lareal,function(k,v){ //|
b.append(‘<option value=‘+v.id+‘>‘+v.areaname); //|
}); //|
}; //|
return false; //|
}; //|
}); //|
}); //|
} //|
//__________________________________________________________________________________________________//|
});
</script>
</head>
<body>
<div><select class="s[]" name="s1[]"></select></div>
</body>
</html>
jquery把给定的json自动生成多级下拉框
时间： 2024-12-12 13:07:25
jquery把给定的json自动生成多级下拉框的相关文章
jQuery自动显示搜索下拉框
描述:当用选择查询时,根据输入的关键字动态从后台模糊查询,把结果异步显示在前端. jsp代码; <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <% String
Jquery+json绑定带层次下拉框（select控件）
一.实现的效果图 二.主要代码 html代码 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> Jquery代码 var html = ['<option value="0">不选父级模块</option>'];
avalon.js 多级下拉框实现
学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特地整理下例子,其中主要实现的难点就是初始化数组的值. var data = [ {"id": 0, "name": "1公司", "grade": -1, "parentid": "-1"}
jQuery动态生成<select>下拉框
前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方式 (1)将数据放在model中,JSP页面用EL表达式${}取出,该方式缺点是数据更改时必须刷新整个页面,本文不过多描述. (2)就是本文要说的jQuery动态生成了,该方式适合数据频繁变动的场景. 2.<select>组成 <select> <option value=”aa
多级下拉框
(function($){ $.fn.AjaxSelect = function(options) { var s = { url : "" // ajax查询的网址 , change : function(obj) {} // 改变选项的回调,参数为当前的jq对象 , val : "id" , text : "title", data : '', }; // var s = $.extend(defaultVal, options); var
ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这个功能了,印象中曾经写过这个功能的文章,一下子找不到了,只好重新贴出来备忘.最近博客快2个月没更新了,因为这两个月一直在闭门写书. 引入js和css下载地址:http://download.csdn.net/detail/zouyujie1127/9550279 <link href="~/l
[oldboy-django][2深入django]Form组件实现生成: select下拉框, checkbox复选框，radio单选框以及如何实现自定义数据格式要求
1 需求 - 1Form组件如何实现生成选择类标签: select,check, radio - 默认值 - 保留上次输入的值 - 2自定义验证规则 - RegexField - -
getJSON获取JSON文件加载下拉框及动态验证比输入项
1.html界面 <form action="" method="get"> <div class="form-group"> <div class="col-sm-3"> <label class="control-label">集团</label> </div> <div class="col-sm-9"&
jquery下拉框插件心得
想记录下自己在开发这个下拉框插件之后的心得,发现写一篇博客,真是"知之非艰,行之惟艰".所以再有看到好的文章,就不会再吝啬自己的"赞"了. 多次想该如何写比较好呢?最终决定,将以后我可能用得到的东西一条条记录下来,一条条来写,这样比较清晰. 1.写jquery插件需要的一个结构 // 定义jQuery私有作用域 (function ($) { // 插件默认属性 var defaults = { name1: "value1", name2: &