小区选择，小区，楼，栋，单元，户号_{ "pointid" : "c84d1e7d5cd449b6b570efb1cd784ad1", -优快云博客

本文链接：https://blog.youkuaiyun.com/Jwg199908/article/details/131112012

<!DOCTYPE html>

<style>

.layui-form-label {

padding: 9px 0px !important;

}

.myBtns {

width: 100%;

text-align: center;

}

.red {

color: red;

}

.title {

width: 100%;

text-align: center;

font-weight: bold;

font-size: 18px;

line-height: 30px;

}

.subTitle {

width: 100%;

text-align: center;

color: #999;

margin-bottom: 10px;

}

.content{

padding: 5px 10px;

line-height: 200%;

text-indent: 2rem;

border: 3px #32ae32 solid;

margin-top: 20px;

display: none;

}

</style>

<body>

#include("/wx/inc/head.html")

#include("/wx/inc/back.html")

</div>

<option value="">请选服务类别</option>

#for(i:sqfw)

<option value="#(i.id)" #if(i.id== fwid) selected #end>#(i.title)</option>

#end

</select>

</div>

<option value="" selected>请选择所属小区</option>

</select>

</div>

<input type="text" name="lxr" required lay-verify="required" placeholder="请输入联系人"

autocomplete="off" class="layui-input" value="#(owner.name??)">

</div>

<!--div class="layui-form-item">

<input type="text" name="roomName" id="roomName" required placeholder="请选择所属小区"

autocomplete="off" class="layui-input" value="#(zfxx.room??)">

<input name="roomId" id="roomId" value="#(zfxx.roomId??)" required class="layui-input"

type="hidden">

</div>

</div-->

<input type="text" name="yyTime" id="yyTime" autocomplete="off" lay-verify="required"

placeholder="请输入预约时间" value="#date(item.yyTime??,'yyyy-MM-dd HH:mm:ss')"

class="layui-input">

</div>

<input type="text" name="lxr" required lay-verify="required" placeholder="请输入联系人"

autocomplete="off" class="layui-input" value="#(owner.name??)">

</div>

<!--div id="dialog" style="display: none;">

<option value="" selected>请选择所属小区</option>

</select>

</div>

<option value="" selected>请选择所属栋数</option>

</select>

</div>

<option value="" selected>请选择所属单元</option>

</select>

</div>

<option value="" selected>请选择所属房号</option>

</select>

</div>

</div>

</div-->

<input type="text" name="phone" required lay-verify="phone" value="#(owner.phone??)" placeholder="请输入手机号"

autocomplete="off" class="layui-input">

</div>

</div>

</form>

</div>

</body>

var form, laydate;

//存储最后选择的小区数据

var xq = [];

layui.use(function () {

$ = layui.$, form = layui.form, laydate = layui.laydate;

;

getData();

var index;

$('#open-dialog').click(function () {

// 创建弹窗

index = openWin('选择小区', '300px', '330px', $('#dialog'), 1);

});

$('.data-set').on('click', function () {

var complex = $(`select[data-next]`);

var fanghao = "";

for (i of complex) {

fanghao += $(i).val();

}

$("#roomName").val(fanghao);

layer.close(layer.index);

})

form.on('select(room)', function (data) {

if (data.value == '') return;

next = $(data.elem).data('next');

clean(next);

value = $(data.elem).data('data')[data.value];

if (next && value)

showOption(next, stat(value, next));

$("#roomId").val(value[0].id);

});

//显示被选中的服务类别的内容

if ('#(fwid)' != -1) {

'#for(i:sqfw)'

if ('#(fwid)' == '#(i.id)') {

$(".content").css("display","revert");

var str = "<div>#(i.content)</div>"

$(".content").append(str);

var strtitle = '<div class="title">#(i.title)</div><div class="subTitle">#(i.subTitle)</div>';

$(".top").append(strtitle);

}

'#end'

}

form.on('select(sqfwId)', function (data) {

$(".content").empty();

$(".top").empty();

'#for(i:sqfw)'

if (data.value == '#(i.id)') {

$(".content").css("display","revert");

var str = "<div>#(i.content)</div>"

$(".content").append(str);

var strtitle = '<div class="title">#(i.title)</div><div class="subTitle">#(i.subTitle)</div>';

$(".top").append(strtitle);

}

'#end'

});

//日期时间选择器

laydate.render({

elem: '#yyTime'

, type: 'datetime'

});

//提交

form.on('submit(formDemo)', function (data) {

var datayyfw = data.field;

$.ajaxSetup({contentType: "application/json; charset=utf-8"});

post('#(root)/wx/yyfw/save', datayyfw).then(res => {

layer.msg(res.code == 0 ? '保存成功' : res.message, {time: 1000}, function () {

if('#(fwid)' == -1){

location.replace("#(root)/wx/yyfw");

}else{

history.back(-1);

}

});

}).catch(err => {

layer.alert(err, {icon: 2});

});

return false;

});

/*清除选择小区下面的选择框中的数据*/

function clean(next) {

o = $(`select[name="${next}"]`);

o.empty();

next = o.data('next');

if (next) clean(next);

}

function getData() {

$.get('#(root)/wx/Room/fangwu').then(res => {

showOption('complex', stat(res.data, 'complex'));

}).fail(() => {

console.log('接口异常');

});

}

function showOption(flag, data) {

if (!flag) return;

o = $(`select[name="${flag}"]`);

o.data('data', data);

o.empty();

o.append(`<option value="">请选择所属小区</option>`);

Object.keys(data).map(name => {

o.append($(`<option value="${name}">${name}</option>`));

});

form.render();

}

function stat(data, groupField, sumField) {

var dataContainer = {};

data.map((item) => {

dataContainer[item[groupField]] = dataContainer[item[groupField]] || [];

dataContainer[item[groupField]].push(item);

});

if (sumField) {

var total = [];

var dataName = Object.keys(dataContainer);

dataName.map((nameItem) => {

let count = 0;

dataContainer[nameItem].map((item) => {

count += item[sumField];

});

item = {};

item[groupField] = nameItem;

item[sumField] = count;

total.push(item);

});

return total;

}

return dataContainer;

}

</script>

</html>