大米CMS官网论坛,大米站长联盟,大米站长之家,大米开发者社区

 找回密码
 注册大米会员

QQ登录

只需一步,快速开始

查看: 4080|回复: 0

jquery ajax生成无限级关联SELECT

[复制链接]

366

主题

625

帖子

5078

积分

超级版主

Rank: 8Rank: 8

积分
5078

授权用户

发表于 2014-10-17 13:01:19 | 显示全部楼层 |阅读模式
  1. /* 多级选择相关函数,如地区选择,分类选择
  2. * multi-level selection
  3. */
  4. /* 地区选择函数 */
  5. function regionInit(divId)
  6. {
  7.     $("#" + divId + " > select").get(0).onchange = regionChange; // select的onchange事件
  8.     $("#" + divId + " .edit_region").click(regionEdit); // 编辑按钮的onclick事件
  9. }
  10. function regionChange()
  11. {
  12.     // 删除后面的select
  13.     $(this).nextAll("select").remove();
  14.     // 计算当前选中到id和拼起来的name
  15.     var selects = $(this).siblings("select").andSelf();
  16.     var id = 0;
  17. var ids = new Array();
  18.     var names = new Array();
  19.     for (i = 0; i < selects.length; i++)
  20.     {
  21.         sel = selects;
  22.         if (sel.value > 0)
  23.         {
  24.             id = sel.value;
  25.             name = sel.options[sel.selectedIndex].text;
  26.             names.push(name);
  27.    ids.push(id);
  28.         }
  29.     }
  30.     $(".city_id").val(id);
  31.     $(".city_ids").val(ids.join(","));
  32.     $(".city_names").val(names.join(","));
  33.     // ajax请求下级地区
  34.     if (this.value > 0)
  35.     {
  36.         var _self = this;
  37.         var url = '/index.php?app=admin&mod=Base&act=select_option&type=city';
  38.         $.getJSON(url, {'pid':this.value}, function(data){
  39.             if (data.done)
  40.             {
  41.                 if (data.retval.length > 0)
  42.                 {
  43.                     $("<select><option>请选择</option></select>").change(regionChange).insertAfter(_self);
  44.                     var data  = data.retval;
  45.                     for (i = 0; i < data.length; i++)
  46.                     {
  47.                         $(_self).next("select").append("<option value='" + data.area_id + "'>" + data.title + "</option>");
  48.                     }
  49.                 }
  50.             }
  51.             else
  52.             {
  53.                 alert(data.msg);
  54.             }
  55.         });
  56.     }
  57. }
  58. function regionEdit()
  59. {
  60.     $(this).siblings("select").show();
  61.     $(this).siblings("span").andSelf().hide();
  62. }

  63. /* 商品分类选择函数 */
  64. function gcategoryInit(divId)
  65. {
  66.     $("#" + divId + " > select").get(0).onchange = gcategoryChange; // select的onchange事件
  67.     window.onerror = function(){return true;}; //屏蔽jquery报错
  68.     $("#" + divId + " .edit_gcategory").click(gcategoryEdit); // 编辑按钮的onclick事件
  69. }
  70. function gcategoryChange()
  71. {
  72.     // 删除后面的select
  73.     $(this).nextAll("select").remove();
  74.     // 计算当前选中到id和拼起来的name
  75.     var selects = $(this).siblings("select").andSelf();
  76.     var id = 0;
  77. var ids = new Array();
  78.     var names = new Array();
  79.     for (i = 0; i < selects.length; i++)
  80.     {
  81.         sel = selects;
  82.         if (sel.value > 0)
  83.         {
  84.             id = sel.value;
  85.             name = sel.options[sel.selectedIndex].text;
  86.             names.push(name);
  87.    ids.push(id);
  88.         }
  89.     }
  90.     $(".mls_id").val(id);
  91.     $(".mls_ids").val(ids.join('#'));
  92.     $(".mls_names").val(names.join("#"));
  93.     // ajax请求下级分类
  94.     if (this.value > 0)
  95.     {
  96.         var _self = this;
  97.         var url = '/index.php?app=admin&mod=Base&act=select_option&type=industry';
  98.         $.getJSON(url, {'pid':this.value}, function(data){
  99.             if (data.done)
  100.             {
  101.                 if (data.retval.length > 0)
  102.                 {
  103.      console.log(data.retval);
  104.                     $("<select><option>请选择</option></select>").change(gcategoryChange).insertAfter(_self);
  105.                     var data  = data.retval;
  106.                     for (i = 0; i < data.length; i++)
  107.                     {
  108.                         $(_self).next("select").append("<option value='" + data.industry_id + "'>" + data.industry_name + "</option>");
  109.                     }
  110.                 }
  111.             }
  112.             else
  113.             {
  114.                 alert(data.msg);
  115.             }
  116.         });
  117.   //获得该行业工种
  118.   var url = '/index.php?app=admin&mod=Base&act=select_option&type=work_type';
  119.    $.getJSON(url, {'pid':this.value}, function(data){
  120.             if (data.done)
  121.             {
  122.                 if (data.retval.length > 0)
  123.                 {
  124.                     var data  = data.retval;
  125.      $("#work_type_id").empty();  
  126.                     for (i = 0; i < data.length; i++)
  127.                     {
  128.                          $("#work_type_id").append("<option value='" + data.id + "'>" + data.work_name + "</option>");
  129.                     }
  130.      $("#work_type_id").prepend("<option selected>请选择</option>");
  131.                 }
  132.    
  133.             }
  134.             else
  135.             {
  136.                 alert(data.msg);
  137.             }
  138.         });
  139.    
  140.   
  141.     }
  142. }
  143. function gcategoryEdit()
  144. {
  145.     $(this).siblings("select").show();
  146.     $(this).siblings("span").andSelf().remove();
  147. }

  148. PHP代码:
  149. //AJAX生成无限关联select
  150. function select_option(){

  151.         $pid = empty($_GET['pid']) ? 0 : intval($_GET['pid']);
  152.         switch ($_GET['type'])
  153.         {
  154.   //行业
  155.             case 'industry':
  156.                 $mod_region = M('industry');
  157.                 $regions = $mod_region->where('parent_id='.$pid)->select();
  158.                 $this->json_result(array_values($regions));
  159.                 break;
  160.   //省份城市
  161.             case 'city':
  162.                 $mod_gcategory = M('area');
  163.                 $cates = $mod_gcategory->where('pid='.$pid)->select();
  164.                 $this->json_result(array_values($cates));
  165.                 break;
  166.   //工种
  167.     case 'work_type':
  168.     $mod = M('work_type');
  169.     $pid_list = array();
  170.     $pid_list = get_childID_list($pid);
  171.     $pid_list[] = $pid;
  172.     $list = $mod->where('industry_id in('.join(',',$pid_list).')')->field('id,work_name')->select();
  173.     $this->json_result(array_values($list));
  174.           break;
  175.         }

  176. }
  177. //JSON格式化返回
  178.      function json_result ($retval = '', $msg = '', $jqremote = false)
  179.     {
  180.         $this->json_header();
  181.         $json = ecm_json_encode(array('done' => true , 'msg' => $msg , 'retval' => $retval));
  182.         if ($jqremote === false)
  183.         {
  184.             $jqremote = isset($_GET['jsoncallback']) ? trim($_GET['jsoncallback']) : false;
  185.         }
  186.         if ($jqremote)
  187.         {
  188.             $json = $jqremote . '(' . $json . ')';
  189.         }
  190.         echo $json;
  191.     }
  192. //谢绝缓存
  193.      function json_header()
  194.     {
  195.         header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
  196.         header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
  197.     }

  198. 用到的函数:
  199. function ecm_json_encode($value)
  200. {
  201.     if (CHARSET == 'utf-8' && function_exists('json_encode'))
  202.     {
  203.         return json_encode($value);
  204.     }
  205.     $props = '';
  206.     if (is_object($value))
  207.     {
  208.         foreach (get_object_vars($value) as $name => $propValue)
  209.         {
  210.             if (isset($propValue))
  211.             {
  212.                 $props .= $props ? ','.ecm_json_encode($name)  : ecm_json_encode($name);
  213.                 $props .= ':' . ecm_json_encode($propValue);
  214.             }
  215.         }
  216.         return '{' . $props . '}';
  217.     }
  218.     elseif (is_array($value))
  219.     {
  220.         $keys = array_keys($value);
  221.         if (!empty($value) && !empty($value) && ($keys[0] != '0' || $keys != range(0, count($value)-1)))
  222.         {
  223.             foreach ($value as $key => $val)
  224.             {
  225.                 $key = (string) $key;
  226.                 $props .= $props ? ','.ecm_json_encode($key)  : ecm_json_encode($key);
  227.                 $props .= ':' . ecm_json_encode($val);
  228.             }
  229.             return '{' . $props . '}';
  230.         }
  231.         else
  232.         {
  233.             $length = count($value);
  234.             for ($i = 0; $i < $length; $i++)
  235.             {
  236.                 $props .= ($props != '') ? ','.ecm_json_encode($value[$i])  : ecm_json_encode($value[$i]);
  237.             }
  238.             return '[' . $props . ']';
  239.         }
  240.     }
  241.     elseif (is_string($value))
  242.     {
  243.         //$value = stripslashes($value);
  244.         $replace  = array('\\' => '\\\\', "\n" => '\n', "\t" => '\t', '/' => '\/',
  245.                         "\r" => '\r', "\b" => '\b', "\f" => '\f',
  246.                         '"' => '\"', chr(0x08) => '\b', chr(0x0C) => '\f'
  247.                         );
  248.         $value  = strtr($value, $replace);
  249.         if (CHARSET == 'big5' && $value{strlen($value)-1} == '\\')
  250.         {
  251.             $value  = substr($value,0,strlen($value)-1);
  252.         }
  253.         return '"' . $value . '"';
  254.     }
  255.     elseif (is_numeric($value))
  256.     {
  257.         return $value;
  258.     }
  259.     elseif (is_bool($value))
  260.     {
  261.         return $value ? 'true' : 'false';
  262.     }
  263.     elseif (empty($value))
  264.     {
  265.         return '""';
  266.     }
  267.     else
  268.     {
  269.         return $value;
  270.     }
  271. }


复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册大米会员

本版积分规则

QQ|小黑屋|大米CMS社区 ( 蜀ICP备11002200号-2广告联系:广告联系 

Powered by 大米CMS

© 2010-2020 大米CMS Inc.

快速回复 返回顶部 返回列表