jquery ajax生成无限级关联SELECT

追影 · 发表于 2014-10-17 13:01:19

/* 多级选择相关函数，如地区选择，分类选择
* multi-level selection
*/
/* 地区选择函数 */
function regionInit(divId)
{
$("#" + divId + " > select").get(0).onchange = regionChange; // select的onchange事件
$("#" + divId + " .edit_region").click(regionEdit); // 编辑按钮的onclick事件
}
function regionChange()
{
// 删除后面的select
$(this).nextAll("select").remove();
// 计算当前选中到id和拼起来的name
var selects = $(this).siblings("select").andSelf();
var id = 0;
var ids = new Array();
var names = new Array();
for (i = 0; i < selects.length; i++)
{
sel = selects;
if (sel.value > 0)
{
id = sel.value;
name = sel.options[sel.selectedIndex].text;
names.push(name);
ids.push(id);
}
}
$(".city_id").val(id);
$(".city_ids").val(ids.join(","));
$(".city_names").val(names.join(","));
// ajax请求下级地区
if (this.value > 0)
{
var _self = this;
var url = '/index.php?app=admin&mod=Base&act=select_option&type=city';
$.getJSON(url, {'pid':this.value}, function(data){
if (data.done)
{
if (data.retval.length > 0)
{
$("<select><option>请选择</option></select>").change(regionChange).insertAfter(_self);
var data = data.retval;
for (i = 0; i < data.length; i++)
{
$(_self).next("select").append("<option value='" + data.area_id + "'>" + data.title + "</option>");
}
}
}
else
{
alert(data.msg);
}
});
}
}
function regionEdit()
{
$(this).siblings("select").show();
$(this).siblings("span").andSelf().hide();
}
/* 商品分类选择函数 */
function gcategoryInit(divId)
{
$("#" + divId + " > select").get(0).onchange = gcategoryChange; // select的onchange事件
window.onerror = function(){return true;}; //屏蔽jquery报错
$("#" + divId + " .edit_gcategory").click(gcategoryEdit); // 编辑按钮的onclick事件
}
function gcategoryChange()
{
// 删除后面的select
$(this).nextAll("select").remove();
// 计算当前选中到id和拼起来的name
var selects = $(this).siblings("select").andSelf();
var id = 0;
var ids = new Array();
var names = new Array();
for (i = 0; i < selects.length; i++)
{
sel = selects;
if (sel.value > 0)
{
id = sel.value;
name = sel.options[sel.selectedIndex].text;
names.push(name);
ids.push(id);
}
}
$(".mls_id").val(id);
$(".mls_ids").val(ids.join('#'));
$(".mls_names").val(names.join("#"));
// ajax请求下级分类
if (this.value > 0)
{
var _self = this;
var url = '/index.php?app=admin&mod=Base&act=select_option&type=industry';
$.getJSON(url, {'pid':this.value}, function(data){
if (data.done)
{
if (data.retval.length > 0)
{
console.log(data.retval);
$("<select><option>请选择</option></select>").change(gcategoryChange).insertAfter(_self);
var data = data.retval;
for (i = 0; i < data.length; i++)
{
$(_self).next("select").append("<option value='" + data.industry_id + "'>" + data.industry_name + "</option>");
}
}
}
else
{
alert(data.msg);
}
});
//获得该行业工种
var url = '/index.php?app=admin&mod=Base&act=select_option&type=work_type';
$.getJSON(url, {'pid':this.value}, function(data){
if (data.done)
{
if (data.retval.length > 0)
{
var data = data.retval;
$("#work_type_id").empty();
for (i = 0; i < data.length; i++)
{
$("#work_type_id").append("<option value='" + data.id + "'>" + data.work_name + "</option>");
}
$("#work_type_id").prepend("<option selected>请选择</option>");
}
}
else
{
alert(data.msg);
}
});
}
}
function gcategoryEdit()
{
$(this).siblings("select").show();
$(this).siblings("span").andSelf().remove();
}
PHP代码：
//AJAX生成无限关联select
function select_option(){
$pid = empty($_GET['pid']) ? 0 : intval($_GET['pid']);
switch ($_GET['type'])
{
//行业
case 'industry':
$mod_region = M('industry');
$regions = $mod_region->where('parent_id='.$pid)->select();
$this->json_result(array_values($regions));
break;
//省份城市
case 'city':
$mod_gcategory = M('area');
$cates = $mod_gcategory->where('pid='.$pid)->select();
$this->json_result(array_values($cates));
break;
//工种
case 'work_type':
$mod = M('work_type');
$pid_list = array();
$pid_list = get_childID_list($pid);
$pid_list[] = $pid;
$list = $mod->where('industry_id in('.join(',',$pid_list).')')->field('id,work_name')->select();
$this->json_result(array_values($list));
break;
}
}
//JSON格式化返回
function json_result ($retval = '', $msg = '', $jqremote = false)
{
$this->json_header();
$json = ecm_json_encode(array('done' => true , 'msg' => $msg , 'retval' => $retval));
if ($jqremote === false)
{
$jqremote = isset($_GET['jsoncallback']) ? trim($_GET['jsoncallback']) : false;
}
if ($jqremote)
{
$json = $jqremote . '(' . $json . ')';
}
echo $json;
}
//谢绝缓存
function json_header()
{
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
}
用到的函数:
function ecm_json_encode($value)
{
if (CHARSET == 'utf-8' && function_exists('json_encode'))
{
return json_encode($value);
}
$props = '';
if (is_object($value))
{
foreach (get_object_vars($value) as $name => $propValue)
{
if (isset($propValue))
{
$props .= $props ? ','.ecm_json_encode($name) : ecm_json_encode($name);
$props .= ':' . ecm_json_encode($propValue);
}
}
return '{' . $props . '}';
}
elseif (is_array($value))
{
$keys = array_keys($value);
if (!empty($value) && !empty($value) && ($keys[0] != '0' || $keys != range(0, count($value)-1)))
{
foreach ($value as $key => $val)
{
$key = (string) $key;
$props .= $props ? ','.ecm_json_encode($key) : ecm_json_encode($key);
$props .= ':' . ecm_json_encode($val);
}
return '{' . $props . '}';
}
else
{
$length = count($value);
for ($i = 0; $i < $length; $i++)
{
$props .= ($props != '') ? ','.ecm_json_encode($value[$i]) : ecm_json_encode($value[$i]);
}
return '[' . $props . ']';
}
}
elseif (is_string($value))
{
//$value = stripslashes($value);
$replace = array('\\' => '\\\\', "\n" => '\n', "\t" => '\t', '/' => '\/',
"\r" => '\r', "\b" => '\b', "\f" => '\f',
'"' => '\"', chr(0x08) => '\b', chr(0x0C) => '\f'
);
$value = strtr($value, $replace);
if (CHARSET == 'big5' && $value{strlen($value)-1} == '\\')
{
$value = substr($value,0,strlen($value)-1);
}
return '"' . $value . '"';
}
elseif (is_numeric($value))
{
return $value;
}
elseif (is_bool($value))
{
return $value ? 'true' : 'false';
}
elseif (empty($value))
{
return '""';
}
else
{
return $value;
}
}

复制代码

		自动登录	找回密码
密码			注册大米会员