这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
本篇文章是对可扩展的无限极联动下拉选项的实例进行了分析介绍,需要的朋友参考下
今天工作需要写树形的联动,于是写了个可扩展的无限极联动下拉选项代码写的比较凌乱 先 mark 有空再整理
随便截个图!先贴数据库
id | category_name 分类名 | pid 父分类 id | orders 排序 |
---|---|---|---|
1 | 22223331 | 0 | 1 |
2 | 2222111 | 1 | 1 |
12 | 44444 | 11 | 0 |
5 | 2222 | 1 | 1 |
6 | 2222 | 1 | 1 |
11 | 333 | 2 | 0 |
13 | 555555 | 12 | 0 |
页面代码 用的 SMARTY
- <div id="select">
- <select name="category_1" id="category_1" onChange="change('category_1');">
- <option>
- 请选择分类
- </option>
- <!-- {foreach from=$galleryCategory item=category} -->
- <option value="{$category.id}">
- {$category.category_name}
- </option>
- <!-- {/foreach} -->
- </select>
- </div>
$galleryCategory 去数据的 PHP 代码为
- $sql = " select * from yl_gallery_category where pid = 0";
- $galleryCategory = $db->query($sql);
- $smarty->assign("galleryCategory",$galleryCategory);
用的原生态代码 还是比较容易理解的然后就是关键的 JS 代码了 function change(val) {
- var str = val; //select的id
- var num; //当前级数
- var id; // 分类id
- num = str.substr(9,10);
- //alert(num);
- var nownum = parseInt(num)+1; // 将字符串转换为数字
- id = $("#"+str+"").val();
- var r = /^[1-9]+[0-9]*]*$/;//正整数
- if (!r.test(id)) {
- //清空过时的选项
- $("select").each(function(index){
- if(index+1 > num) {
- $(this).remove();
- }
- })
- return false;
- }
- var url = 'gallery.php?act=category&pid='+id;
- $.ajax({
- type: "POST",
- cache: false,
- url: url,
- datatype : 'json',
- timeout : 3000,
- success: function(result){
- if ( result != 0) {
- var html = "<select name=category_"+nownum+" id=category_"+nownum+" onChange=change('category_"+nownum+"'); >";
- html += "<option>请选择分类 </option>";
- var datas = eval(result);
- $.each(datas, function(i,val){
- html += "<option value='"+val.id+"' >"+val.category_name+"</option>";
- });
- html += "</select>";
- //清空过时的选项
- $("select").each(function(index){
- if(index+1 > num) {
- $(this).remove();
- }
- })
- $("#select").append(html);
- } else {
- //清空过时的选项
- $("select").each(function(index){
- if(index+1 > num) {
- $(this).remove();
- }
- })}
- },
- error: false
- });
- }
AJAX 取数据的 PHP 代码
- $sql = " select * from yl_gallery_category where pid = " .$pid;
- $res = $db->query($sql);
- if (empty($res)) {
- $res = 0;
- }
- echo json_encode($res);
OK 大功告成!
来源: http://www.phperz.com/article/17/0414/280140.html