关于Jqueryweui 的select联动用法

article/2025/10/9 19:02:10

在使用Jquery weui 框架时，我想实现根据收货地址获得该条收货地址的绑定的联系人和电话。
但是又懒得根据收货地址查询联系人和联系电话。（因为收货地址都是从数据库获取的，此时不仅拿到了收货地址，还拿到了联系人和联系电话）。如果再查询数据库多此一举。

先上效果图：
默认效果
在下拉框选中不同的收货地址，联系人和联系电话也会跟着变化
实现效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>选择收货地址</title><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"charset="utf-8"><link rel="stylesheet" href="/static/wechar/css/iconfont.css"><link rel="stylesheet" href="/static/wechar/css/jquery-weui.css"><link rel="stylesheet" href="/static/wechar/css/list.css"><link rel="stylesheet" href="/static/wechar/css/weui.css"><script src="/static/wechar/js/jquery-2.1.4.js"></script><script src="/static/wechar/js/jquery.min.js"></script><script src="/static/wechar/js/jquery-weui.min.js"></script><script src="/static/wechar/js/calendar.js"></script><script src="/static/wechar/js/city-picker.min.js"></script><script src="/static/wechar/js/datetime-picker.js"></script><script src="/static/wechar/js/fastclick.js"></script><script src="/static/wechar/js/select.js"></script><script type="text/javascript" src="/static/pyxback/js/common/common.js"></script><style>body {background: #f6f6f6;}.weui-cell {font-size: 14px;}</style><script>function check() {/*根据取票方式判断信息*/if ($("#pick").attr("data-values") == 0) {$("#email").val("");$("#address").val("");$("#addperson").val("");$("#addresstel").val("");/*邮箱取票*/} else if ($("#pick").attr("data-values") == 1) {$("#address").val("");$("#addperson").val("");$("#addresstel").val("");/*邮寄取票*/} else if ($("#pick").attr("data-values") == 2) {$("#email").val("");}return true;};function f_save() {if (check()) {var params = '';$("#applyFrom input").each(function () {var value = $(this).attr("data-values");if (value) {params += $(this).attr("name") + "=" + value + "&";} else {params += $(this).serialize() + "&";}});alert(params);return params;}};/*** 保存数据*/function saveInfo() {var params = f_save();if (params) {$.ajax({url:url,type: 'post',dataType: 'json',data: params,async: false,success: function (result) {if (result.success) {/*跳转页面*/$.toast("操作成功");location.href = url;}},error: function (error) {$.toast("操作失败，请重试", 'cancel');  //设置显示时间}});}}</script>
</head>
<body>
<!--表单-->
<div class="weui-cells weui-cells_form" id="applyFrom" enctype="multipart/form-data"method="post" target="_parent"><!--收货地址--><div class="weui-cells" id="addressType"><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">收货地址</label></div><div class="weui-cell__bd"><input class="weui-input" type="text" id='address' name="unobAddress" placeholder="请输入你的收货地址"th:value="${addr.detailaddress}"></div></div><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">联系人</label></div><div class="weui-cell__bd"><input class="weui-input" type="text" id='addperson' name="addresstel" placeholder="请输入你的联系人"th:value="${addr.baddName}"></div></div><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">联系电话</label></div><div class="weui-cell__bd"><input class="weui-input" type="text" name="addresstel" id='addresstel' placeholder="请输入你的联系电话"th:value="${addr.baddTel}"></div></div></div><!--按钮--><div class="weui-cell"><button class=" weui-btn  weui-btn_primary" style="width: 100%" onclick="saveInfo()">确定</button></div>
</div>
</div>
<script>$(function () {FastClick.attach(document.body);});
</script><script>$(function () {getAddr();/*收货地址*/function getAddr() {$.ajax({data: {consId: [[${person.consId}]]},url: url,datatype: "json",async: false,//异步请求success: function (data) {if (data) {var array = new Array;for (var i = 0; i < data.length; i++) {var info = {"title": data[i].detailaddress,"value": data[i].detailaddress,"tel": data[i].baddTel,"name": data[i].baddName};array.push(info);}$("#address").select({title: "收货地址",multi: false,items: array,beforeClose: function (values) {return true;},onChange: function (array) {/*选中的下标值一直是0*//*origins：官方组件给的字段*/$("#addresstel").val(array.origins[0].tel);$("#addperson").val(array.origins[0].name);}});}}});}})
</script>
</body>
</html>