级联下拉框
级联下拉框
支持1、支持多级下拉框级联 2、支持多级下拉框单选、复选
使用说明1.插件需引用JQuery支持 2.插件无任何样式,样式需自定义
案例案例地址 案例一：
<script type="text/javascript" src="./data.js"></script>
<script type="text/javascript" src="../caseselect.js"></script>
<script type="text/javascript">
let caseInstance = $("#caseSelect1").caseSelect(options1 = {
data: function() {
return data;
},
onBuildBefore: function() {
console.log("start build");
},
onRenderSelect: function() {
let div = document.createElement("div");
return $(div).append(document.createElement("select"));
},
onBuildAfter: function() {
console.log("end build");
},
onBuildCompleted: function() {
console.log("complete build");
},
onSelected: function(elem, value) {
console.log(caseInstance.getValue());
},
});
caseInstance.setValue(["1185", "", "1251"]);
</script>
案例二:
<script type="text/javascript" src="./data.js"></script>
<script type="text/javascript" src="../caseselect.js"></script>
<script type="text/javascript">
let caseInstance2 = caseSelect({
elem: "#caseSelect2",
value: ["1185", "", "1489"],
data: function() {
return data;
},
onBuildBefore: function() {
console.log("start build");
},
onBuildAfter: function() {
console.log("end build");
},
onBuildCompleted: function() {
console.log("complete build");
},
onSelected: function(elem, value) {
console.log(value);
},
});
console.log(caseInstance2.getValue());
</script>
案例三:
<script type="text/javascript" src="./data.js"></script>
<script type="text/javascript" src="../caseselect.js"></script>
<script type="text/javascript">
let caseInstance3 = $("#caseSelect3").caseSelect({
data: function() {
return data;
},
multiple: true,
value: [
["825"],
[],
["766", "148"]
],
onBuildBefore: function() {
console.log("start build");
},
onBuildAfter: function() {
console.log("end build");
},
onBuildCompleted: function() {
console.log("complete build");
},
onSelected: function(elem, value) {
console.log(caseInstance.getValue());
},
});
</script>
参数配置
{
elem: '',/*渲染容器id */
multiple: false,/*是否支持多选*/
deepin: 1,/*下拉框深度*/
top_value: -1,/*下拉框顶级初始值*/
parent_field: 'pid',/*下拉框父字段*/
value_field: 'id',/*下拉框value字段*/
text_field: 'name',/*下拉框text字段*/
data: {},/*下拉框数据集{"1":[],"2":[],"3":[],"4":[]}*/
value: [],/*下拉框值*/
onBuildBefore: function(options) {},/*构建前回调*/
onRenderSelect: function(options, level) {},/*渲染下拉框回调*/
onBuildAfter: function(options) {}, /*构建后回调*/
onBuildCompleted: function(options) {},/*构建完成回调*/
onSelected: function(elem, value) {},/*下拉框选择回调*/
}
当前版本
v0.0.1（update at 2020-04-06）
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
