xm-select树形下拉框渲染,取值,赋值

//下拉树渲染
<div id="demo3" class="xm-select-demo" style="width: 300px;"></div>
						<script>
							var demo3 = xmSelect.render({
								el: '#demo3', 
								model: { label: { type: 'text' } },
								radio: true,
								clickClose: true,
								tree: {
									show: true,
									strict: false,
									expandedKeys: [ -1 ],
								},
								height: 'auto',
								data:[]
							})
							$.ajax({
							  type: 'get',
							  url: 'json/tree.json', //请求数据的地址
							  dataType: "json", //返回数据形式为json
							  success: function(param) {
									function filter(data, pid) {
								 	var treedata = [];
								 	var temp;
								 	for (var i = 0; i < data.length; i++) {
								 		if (data[i].pid == pid) {
								 			var obj = data[i];
								 			temp = filter(data, data[i].id);
								 			if (temp.length > 0) {
								 				obj.children = temp;
								 				obj.name = data[i].oname
												obj.value=data[i].id
								 			}
								 			obj.name = data[i].oname
											obj.value=data[i].id
								 			treedata.push(obj);
								 		}
								 	}
								 	return treedata;
								 }
									var res = filter(param, 0);
										demo3.update({
											data: res,
											autoRow: true,
										})
							},
							})



json数据格式
[
	{
		"id":1,
		"pid":0,
		"oname":"网服"
	},
	{
		"id":2,
		"pid":1,
		"oname":"广州分公司"
	},
	{
		"id":3,
		"pid":2,
		"oname":"前端"
	},
	{
		"id":4,
		"pid":1,
		"oname":"后端"
	}
]
//取值
demo3.getValue("value")  //[2]
demo3.getValue("valustr")  //2
demo3.getValue("name")  //["广州分公司"]
demo3.getValue("nameStr")  //广州分公司




//赋值
var value1 = {
	name: text,//text是取到的name值
    value: fid//fid是取到的value值
}

demo3.setValue([value1])

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
xm-select 是一个基于 layui 的下拉框组件,可以实现多选、搜索、异步加载等功能。下面是一个简单的示例代码: ```html <div class="layui-form-item"> <label class="layui-form-label">多选下拉框</label> <div class="layui-input-block"> <select xm-select="demo2" xm-select-max="3" xm-select-search xm-select-skin="default" name="city[]" lay-verify="required" multiple> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> <option value="4">杭州</option> <option value="5">南京</option> <option value="6">武汉</option> <option value="7">成都</option> </select> </div> </div> ``` 其中,`xm-select` 属性指定了下拉框的 ID,`xm-select-max` 属性指定了最多可选项数,`xm-select-search` 属性表示开启搜索功能,`xm-select-skin` 属性指定了皮肤样式,`multiple` 属性表示开启多选。 在 JavaScript 中,我们需要使用 `xmSelect` 函数初始化下拉框,并设置各种配置项: ```javascript layui.use(['xmSelect'], function(){ var xmSelect = layui.xmSelect; var demo2 = xmSelect.render({ el: '#demo2', name: 'city', layVerify: 'required', filterable: true, searchPlaceholder: '请选择城市', tips: '最多选择3个城市', max: 3, data: [{ name: '北京', value: 0 }, { name: '上海', value: 1 }, { name: '广州', value: 2 }, { name: '深圳', value: 3 }, { name: '杭州', value: 4 }, { name: '南京', value: 5 }, { name: '武汉', value: 6 }, { name: '成都', value: 7 }] }); }); ``` 其中,`el` 属性指定了下拉框的 ID,`name` 属性指定了提交表单时的参数名,`layVerify` 属性指定了表单验证规则,`filterable` 属性表示开启搜索功能,`searchPlaceholder` 属性指定了搜索框的提示文本,`tips` 属性指定了超出可选项数时的提示文本,`max` 属性指定了最多可选项数,`data` 属性指定了下拉框的选项数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值