老师关于区域选择框的问题

来源：9-6 店铺列表页前端的开发上

qq_一半一伴_0

2020-03-22

老师，区域列表框你是怎么写的。我查看sui mobile中好像没有那个组件。您能告诉我这个前端是怎样的实现的吗？

图片可能看不清楚。请老师谅解，我画了红色的框框。

您的前端代码我没有完全照抄。为了学习一下如何组合轮子，我就自己写了。麻烦老师帮我解答一下。

写回答

2回答

翔仔

2020-03-23

已采纳

同学好，这个主要是这样实现的，

html里面

先定义

				<div class="select-wrap">
					<!-- 区域列表展示区 -->
					<select class="select" id="area-search"></select>
				</div>

然后css里面，定义select-wrap的样式

.select-wrap {
    margin: 0 .5rem;
}
.select {
    border: 1px solid #0894ec;
    color: #0894ec;
    background-color: #efeff4;
    width: 100%;
    height: 1.5rem;
    font-size: .7rem;
}

之后，只要在js里拼接出option标签即可

								var selectOptions = '<option value="">全部街道</option>';
								// 获取后台返回过来的区域信息列表
								var areaList = data.areaList;
								// 遍历区域信息列表，拼接出option标签集
								areaList.map(function(item, index) {
									selectOptions += '<option value="'
											+ item.areaId + '">'
											+ item.areaName + '</option>';
								});
								// 将标签集添加进area列表里
								$('#area-search').html(selectOptions);

qq_一半一伴_0

翔仔

谢谢老师

2020-03-24

共3条回复