Skip to content

Commit

Permalink
新增url支持
Browse files Browse the repository at this point in the history
  • Loading branch information
@lanrenbulan
lanrenbulan committed Mar 25, 2024
1 parent bdd7a65 commit dbde30b
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 62 deletions.
124 changes: 67 additions & 57 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@
</form>

<input id="multi-select5" name="cities5" class="layui-input" readonly lay-verify="required" placeholder="请选择" />

<h3>URL</h3>
<input id="multi-select6" name="cities6" class="layui-input" readonly lay-verify="required" placeholder="请选择" />
</div>

<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
Expand All @@ -62,7 +65,8 @@
}).extend({
select: 'select'
});
layui.use(['select', 'form'], function(){

layui.use(['select', 'form'], function() {
const select = layui.select;
const form = layui.form;
const $ = layui.$;
Expand Down Expand Up @@ -98,55 +102,61 @@
}

select.render({
elem: '#multi-select4',
keywordPlaceholder: '关键词',
unfilteredText: '没有匹配的选项',
options: [
{id: 1,title: '北京', selected: false},
{id: 2,title: '上海', selected: selected},
{id: 3,title: '湖北', selected: false},
{id: 4,title: '湖南', selected: selected},
{id: 5,title: '河北', selected: false},
{id: 6,title: '山西', selected: selected},
{id: 7,title: '内蒙古', selected: false},
{id: 8,title: '西藏', selected: selected},
{id: 9,title: '台湾', selected: false},
{id: 10,title: '新疆', selected: false},
{id: 11,title: '天津', selected: false},
{id: 12,title: '山东', selected: false},
{id: 13,title: '浙江'},
{id: 14,title: '福建'},
{id: 15,title: '广西'},
{id: 16,title: '贵州'},
{id: 17,title: '四川'},
],
});
elem: '#multi-select4',
keywordPlaceholder: '关键词',
unfilteredText: '没有匹配的选项',
options: [
{id: 1,title: '北京', selected: false},
{id: 2,title: '上海', selected: selected},
{id: 3,title: '湖北', selected: false},
{id: 4,title: '湖南', selected: selected},
{id: 5,title: '河北', selected: false},
{id: 6,title: '山西', selected: selected},
{id: 7,title: '内蒙古', selected: false},
{id: 8,title: '西藏', selected: selected},
{id: 9,title: '台湾', selected: false},
{id: 10,title: '新疆', selected: false},
{id: 11,title: '天津', selected: false},
{id: 12,title: '山东', selected: false},
{id: 13,title: '浙江'},
{id: 14,title: '福建'},
{id: 15,title: '广西'},
{id: 16,title: '贵州'},
{id: 17,title: '四川'},
],
});

const select5 = select.render({
elem: '#multi-select5',
keywordPlaceholder: '关键词',
unfilteredText: '没有匹配的选项',
options: [
{id: 1,title: '北京', selected: false},
{id: 2,title: '上海', selected: selected},
{id: 3,title: '湖北', selected: false},
{id: 4,title: '湖南', selected: selected},
{id: 5,title: '河北', selected: false},
{id: 6,title: '山西', selected: selected},
{id: 7,title: '内蒙古', selected: false},
{id: 8,title: '西藏', selected: selected},
{id: 9,title: '台湾', selected: false},
{id: 10,title: '新疆', selected: false},
{id: 11,title: '天津', selected: false},
{id: 12,title: '山东', selected: false},
{id: 13,title: '浙江'},
{id: 14,title: '福建'},
{id: 15,title: '广西'},
{id: 16,title: '贵州'},
{id: 17,title: '四川'},
],
});
elem: '#multi-select5',
keywordPlaceholder: '关键词',
unfilteredText: '没有匹配的选项',
options: [
{id: 1,title: '北京', selected: false},
{id: 2,title: '上海', selected: selected},
{id: 3,title: '湖北', selected: false},
{id: 4,title: '湖南', selected: selected},
{id: 5,title: '河北', selected: false},
{id: 6,title: '山西', selected: selected},
{id: 7,title: '内蒙古', selected: false},
{id: 8,title: '西藏', selected: selected},
{id: 9,title: '台湾', selected: false},
{id: 10,title: '新疆', selected: false},
{id: 11,title: '天津', selected: false},
{id: 12,title: '山东', selected: false},
{id: 13,title: '浙江'},
{id: 14,title: '福建'},
{id: 15,title: '广西'},
{id: 16,title: '贵州'},
{id: 17,title: '四川'},
],
});

const select6 = select.render({
elem: '#multi-select6',
keywordPlaceholder: '关键词',
unfilteredText: '没有匹配的选项',
url: 'options.json'
});

$('#reload').click(function() {
select5.reload({
Expand All @@ -156,16 +166,16 @@
});

// 提交事件
form.on('submit(demo-verify)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
form.on('submit(demo-verify)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
});
</script>
</body>
Expand Down
19 changes: 19 additions & 0 deletions options.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
[
{"id": 1,"title": "北京", "selected": true},
{"id": 2,"title": "上海", "selected": false},
{"id": 3,"title": "湖北", "selected": false},
{"id": 4,"title": "湖南", "selected": false},
{"id": 5,"title": "河北", "selected": false},
{"id": 6,"title": "山西", "selected": false},
{"id": 7,"title": "内蒙古", "selected": true},
{"id": 8,"title": "西藏", "selected": true},
{"id": 9,"title": "台湾", "selected": false},
{"id": 10,"title": "新疆", "selected": false},
{"id": 11,"title": "天津", "selected": false},
{"id": 12,"title": "山东", "selected": false},
{"id": 13,"title": "浙江", "selected": false},
{"id": 14,"title": "福建", "selected": false},
{"id": 15,"title": "广西", "selected": false},
{"id": 16,"title": "贵州", "selected": false},
{"id": 17,"title": "四川", "selected": false}
]
38 changes: 33 additions & 5 deletions select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ layui.define(['jquery', 'dropdown'],function(exports){
allowCreate: true,
// 是否折叠已选择的选项
collapseSelected: false,
parseOptions: undefined,
}
};

Expand Down Expand Up @@ -104,8 +105,29 @@ layui.define(['jquery', 'dropdown'],function(exports){
Class.prototype.render = function() {
var that = this;

if (that.config.url) {
$.get(that.config.url, {}, function(res) {
let options = [];
if (that.config.parseOptions) {
options = that.config.parseOptions(res);
} else {
options = res;
}
console.log(options);
that.doRender(options);
});

return ;
}

that.doRender(that.config.options);
};

Class.prototype.doRender = function(options) {
var that = this;

// 初始化选项
var initOptions = that.config.options.map(function(option) {
var initOptions = options.map(function(option) {
return {
id: option[that.config.customName.id],
title: option[that.config.customName.title],
Expand Down Expand Up @@ -149,7 +171,7 @@ layui.define(['jquery', 'dropdown'],function(exports){

that.renderDropdown();
that.renderSelection();
};
}

// 清空所有值
Class.prototype.clear = function() {
Expand All @@ -176,6 +198,7 @@ layui.define(['jquery', 'dropdown'],function(exports){
}

this.context.selectedIds.push(id);
console.log(this.context.selectedIds)
}

this.reloadDropdownData(this.buildRenderOptions());
Expand Down Expand Up @@ -430,9 +453,14 @@ layui.define(['jquery', 'dropdown'],function(exports){
};

Class.prototype.getSelectedOptions = function() {
return this.getAllOptions().filter(function(option) {
return option.selected;
});
let selectedIds = this.context.selectedIds;
let selectedOptions = [];

for (var i = 0; i < selectedIds.length; i++) {
selectedOptions.push(this.getOptionById(selectedIds[i]));
}

return selectedOptions;
};

//核心入口
Expand Down

0 comments on commit dbde30b

Please sign in to comment.