使用distpicker的页面完善
2024-05-17 21:44:46
使用HTML页面 添加属性 即可在回显时绑定想要展示的属性 getSexinfo绑定请求
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试页面</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="distpicker.data.js"></script><script src="distpicker.js"></script><script>var app = new Vue({el: "#app",data:{provinceRadio:"",checked:"1"//回显数据绑定},mounted() {this.getSexinfo(); //在里面声明初始化时要调用的方法},methods:{findAll : function(){let province = $("#province").find(':selected').data('code');//获取省，如：北京市let city = $("#city").find(':selected').data('code');//获取市，如：北京城区let district = $("#district").find(':selected').data('code');//获取区，如：东城区console.log(province);console.log(city);console.log(district);},checkYes : function(){var vm = this;var divV = document.getElementById("hideOrview");let v = "线下面基";vm.provinceRadio = '线下面基';console.log(v);console.log(vm.provinceRadio);divV.style.display = "block";},checkNo : function(){var divV = document.getElementById("hideOrview");let v = "网络会议";console.log(v);divV.style.display = "none";},getSexinfo:function (){var vm = this;if(vm.checked == '1'){let elementById = document.getElementById("contactChoice1");elementById.setAttribute('checked','checked');}else {let elementById = document.getElementById("contactChoice2");elementById.setAttribute('checked','checked');}},},});</script>
</head>
<body>
<div id="app"><div id="hideOrview" style="display: block"><div data-toggle="distpicker"><select data-province="选择省" id="province"></select><select data-city="选择市" id="city"></select><select data-district="选择区/县" id="district"></select></div><div><button onclick="app.findAll()" style="text-align:center">按钮</button></div></div>
</div><div><input type="radio" id="contactChoice1" name="sex" value="0" onclick="app.checkNo()"><label for="contactChoice1">网络会议</label><input type="radio" id="contactChoice2" name="sex" value="1" onclick="app.checkYes()"><label for="contactChoice2">线下面基</label></div></div></body>
</html>使用jsp页面 需要引入jstl 加载进tomcat启动
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html>
<head><title>测试页面</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="distpicker.data.js"></script><script src="distpicker.js"></script><script>var app = new Vue({el: "#app",data:{provinceRadio:"",checked:"1"},mounted(){this.getSexinfo();},methods:{findAll : function(){// let province = $("#province").val();//获取省，如：北京市// let city = $("#city").val();//获取市，如：北京城区// let district = $("#district").val();//获取区，如：东城区let province = $("#province").find(':selected').data('code');//获取省，如：北京市let city = $("#city").find(':selected').data('code');//获取市，如：北京城区let district = $("#district").find(':selected').data('code');//获取区，如：东城区console.log(province);console.log(city);console.log(district);},checkYes : function(){var vm = this;var divV = document.getElementById("hideOrview");let v = "线下面基";vm.provinceRadio = '线下面基';console.log(v);console.log(vm.provinceRadio);divV.style.display = "block";},checkNo : function(){var divV = document.getElementById("hideOrview");let v = "网络会议";console.log(v);divV.style.display = "none";},getSexinfo:function (){var vm = this;if(vm.checked == '1'){// 根据value值回显单选radio$(':radio[name="sex"][value="'+ vm.checked +'"]').prop("checked","checked");}else {$(':radio[name="sex"][value="'+ vm.checked +'"]').prop("checked","checked");}},},});</script>
</head>
<body>
<div id="app"><input type="text" v-model="checked" placeholder="edit me"><div id="hideOrview" style="display: block"><div data-toggle="distpicker"><select data-province="选择省" id="province"></select><select data-city="选择市" id="city"></select><select data-district="选择区/县" id="district"></select></div><div><button onclick="app.findAll()" style="text-align:center">按钮</button></div></div>
</div><div><input type="radio" id="contactChoice1" name="sex" value="0" onclick="app.checkNo()"><label for="contactChoice1">网络会议</label><input type="radio" id="contactChoice2" name="sex" value="1" onclick="app.checkYes()"><label for="contactChoice1">线下面基</label></div><br></div></body>
</html>使用distpicker的页面完善相关推荐
- 嗖嗖嗖主题网外贸企业主题制作视频教程--第四讲 Wordpress首页模板文件index.php静态页面完善
第四讲 Wordpress首页模板文件index.php静态页面完善
- 【Unity使用UGUI实现王者荣耀UI界面（二）】加载页面-静音按钮和页面完善
效果展示 文章目录 [Unity使用UGUI实现王者荣耀UI界面(二)]加载页面-静音按钮和页面完善 1. 打开项目 2. Toggle实现打开关闭音效的功能 2.1 Toggle组件演示 2.2 使 ...
- 微信开发修改button里的字体大小_微信小程序全栈开发课程【视频版】2.2 index页面完善...
点击观看视频课程 ↓↓↓ 微信小程序首页完善https://www.zhihu.com/video/1195308096099282944 课程文字版 1.template 部分 (1)修改temp ...
- React多页面应用脚手架-v1.3.0
react-multi-page-app是一个基于react和webpack的多页面应用架构,通过编译生成对应目录结构清晰的静态页面,实现多页面便捷开发维护.1.3.0 版本对项目整体做了一个全面的升 ...
- 学成在线--20.新增课程（最后完善）
文章目录 一.效果展示 二.服务端 1.Api接口 2.Dao 3.Service 4.Controller 三.前端 1.页面完善 1)创建course_add.vue页面 2)course_add ...
- 【Django】开发日报_11_Day：手机号码管理系统-Ajax请求完善
目录 0.Django开发回顾 如果使用sqlite3(文件数据库)可以省略很多前面的数据库配置操作 1.Ajax请求页面完善 0.Django开发回顾 如果使用sqlite3(文件数据库)可以省略很 ...
- 前端学习从入门到高级全程记录之11 （云道页面例子后续）
本期目标 本期学习的主要目标是:1.前几期"云道页面例子"的完善.2.CSS高级技巧的学习 1.云道页面完善 在前2期的云道案例中,我们完成了一半的布局,后面的内容需要用到定位等知 ...
- 2016年度工作总结
一想起来今天全办公室人都在写年终总结的场景,不由自主的笑开了颜,因为我把一名程序媛的年终总结硬生生的写成了一篇"散文",而且还是很"冒牌"的总结,以下就是&qu ...
- DeeCamp2021启动，李开复张亚勤吴恩达等大咖喊你报名啦
转载自 创新工场:chuangxin2009 量子位 编辑 | 公众号 QbitAI 十年后的世界是什么样的?在AI带来的X量级加速下,我们将迎来什么样的新生活? 也许那时,AI可以让说着各种不同语言 ...
最新文章
- Ubuntu12.04安装jdk1.6.0
- C++类和对象学习总结
- Spring Boot——不同环境调用不同的配置文件解决方案
- 如何更换outlook邮件的背景色
- java递归分苹果_递归较难题——分苹果问题
- 她16岁因汶川地震改志学医，仅27岁当上浙大博导！她说：科研是“止不住想念到失眠的对象”...
- 看我如何用Dataphin实现自动化建模
- 三角形外接球万能公式_秒杀三角形问题！！三角形分角线的几个重要结论及其应用...
- PHPweb应用程序开发技巧
- SpringBoot2.x整合Activiti7后，禁用SpringBootSecurity问题
- L2C中CtempGen层语义保持证明中环境匹配的定义
- linux 访问 小米路由器,彻底解决Win10局域网无法访问小米路由器硬盘的问题
- 云数据库有什么用？有了云服务器为什么还要云数据库？
- 他强由他强，清风拂山岗；他横任他横，明月照大江
- 【论文阅读】Multi-hop Question Answering via Reasoning Chains
- 计算机主机的是指什么,电脑基本操作包括哪些 电脑的基本的操作是指什么
- Chapter 3: Strings、Vectors And Arrays
- 微信小程序 ｜基于百度AI从零实现人脸识别小程序
- 时间管理，从折磨到享受
- docker 常用命令总结