使用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可以让说着各种不同语言 ...
最新文章
- python3 装饰器_python3装饰器
- JavaScript定义函数的几种方式 1
- java链接mysql数据库格式_JDBC URL连接常用数据库格式
- python初学者用什么编辑器好_新人学 python 选什么编辑器比较好呢？？
- python中面向对象空间时间_python基础学习Day15 面向对象、类名称空间、对象名称空间 （2）...
- MathType 插入定义的chapter and section break后无法隐藏
- php pacs,PACS系统
- S7-1200PLC 与温控仪表Modbus RTU通信
- CodeForces - 777D Cloud of Hashtags
- 反素数（反转拼写的素数）
- 第一代电子计算机采用的物理器,第一章 计算机基础知识
- 计算机英语中协议英语,计算机英语
- oracle安装时创建应答文件,12c 应答方式安装 （二） 创建cdb+pdb+netca
- Microsoft Office Project 2010 操作手册
- 《网络编程》基本 UDP 套接字编程
- 二元函数泰勒公式例题_二元函数泰勒公式.pdf
- 小程序 php 微信运动步数
- Django博客搭建-新闻模块6-新闻搜索功能（Django+Haystack+elasticsearch）
- 因为报表做得太好，我被阎王爷叫走了.....
- python爬虫：多线程收集/验证IP从而搭建有效IP代理池