功能简述:
将从服务端取到的分类数据生成select标签,并控制表单的值
- jquery 1.7+
首先需要一个表单的标签来存放name值
<input type="text" name="cat_id" value="" />
初始化代码
$('input[name=cat_id]').jsonCategoryToSelector(opts);
插件首先会从提取数据链接的地址,向服务器请求数据,请求回数据后解析
请求成功后,会将表单隐藏,生成select标签在原有的表单后面,
select标签绑定事件,值改变后会将值传给原有的表单
//默认的参数
var opts = {
dataUrl : '/data/category.json',
//显示的key值
nameKey : 'cat_name',
//分类选项的值
valueKey : 'id',
//子分类的key值
subKey : '_child',
//值是标识在标签的哪个属性里
val_attr : 'value',
//选择标签的样式名
class_name : '',
//默认无值的显示选项
defaultOpt : {
name : '--请选择分类--',
value : 0,
show : 1
}
};
[
{
"id":"2",
"cat_name":"PC\u7ad9",
"pid":"0",
"_child":[
{
"id":"3",
"cat_name":"PHP\u7f51\u7ad9",
"pid":"2"
},
{
"id":"5",
"cat_name":"Java\u7ad9",
"pid":"2"
}
]
},
{"id":"4","cat_name":"\u624b\u673a\u7ad9","pid":"0"}
]