使用distpicker的简单测试页面

引入vue.js和distPicker.js，jquery.js即可在控制台动态获取当前所选的值

<!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="vue-2.5.16.min.js"></script><script src="distpicker.data.js"></script><script src="distpicker.js"></script><script>var app = new Vue({el: "#app",data:{provinceTest:"test"},methods:{findAll : function(){let province = $("#province").val();//获取省，如：北京市let city = $("#city").val();//获取市，如：北京城区let district = $("#district").val();//获取区，如：东城区console.log(province);console.log(city);console.log(district);},checkYes : function(){var divV = document.getElementById("hideOrview");divV.style.display = "block";},checkNo : function(){var divV = document.getElementById("hideOrview");divV.style.display = "none";},},});$("#distpicker").distpicker('destroy');$("#distpicker").distpicker({autoSelect: true,placeholder: false});</script>
</head>
<body>
<div id="app"><div id="hideOrview" style="display: block"><div data-toggle="distpicker" id="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><input type="radio" id="contactChoice1" name="1" checked="checked" onclick="app.checkNo()"><label for="contactChoice1">网络会议</label><input type="radio" id="contactChoice2" name="1" checked="checked" onclick="app.checkYes()"><label for="contactChoice1">线下面基</label></div></div></body>
</html>

使用distpicker的简单测试页面相关推荐

rspec 测试页面元素_如何使用共享示例使您的RSpec测试干燥
rspec 测试页面元素 by Parth Modi 由Parth Modi 如何使用共享示例使您的RSpec测试干燥 (How to DRY out your RSpec Tests using S ...
自动化测试--实现一套完全解耦的简单测试框架
selenium中有提供pageObject,支持将页面元素和动作单独封装到一个类中. 但是,当页面元素发生变化的时候(在项目的维护过程中,很很容易发生的),就需要去修改源代码.为了解决这个问题,可以 ...
ESP8266的AP模式与STA模式简单测试
系列文章: ESP8266的AP模式与STA模式简单测试简单的Java服务器和客户端的通信 STM32 ESP8266和Java服务器透传模式下的双向通信 jsp向servlet传输数据 Servl ...
tomcat9安装及其简单测试
tomcat 9安装及其简单测试 1.安装安装yum install -y wget 在官网下载tomcat 和jdk wget 下载地址(进行下载) 将下载的压缩包放到/usr/local mv ...
CentOS7设置静态IP、搭建单机版FastDFS图片服务器、使用FastDFS-Client客户端进行简单测试、实现图片上传、实现商品添加修改删除
CentOS7设置静态IP.搭建单机版FastDFS图片服务器.使用FastDFS-Client客户端进行简单测试.实现图片上传.实现商品添加修改删除 CentOS7设置静态IP而且还可以上网 192 ...
wicket学习笔记（2）：简单登陆页面的创建
这次整理了先前大概wicket学习使用的简单东西,创建了一个简单登陆页面.主要用来学习以下知识点内容. wicket基础配置文件等见上一篇文章: wicket学习笔记(1):入门篇页面效果如下(用来 ...
JavaScript 通过正则测试页面是否出现连续的重复字符
在上班的路上,从群里看到有个测试朋友问有没有查看页面上是否有重叠字的工具.从字面意思看,我理解为样式问题导致文字出现堆叠. 他正在对一本上百页的一本说明书进行最后的矫正,检查是否有两个相同的字符连续出 ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...
INNODB在裸设备上的性能简单测试
INNODB在裸设备上的性能简单测试裸设备简单测试 2009年4月28日我这里用的SUN VBOX以及SUPER-SMACK来得到的数据. 至于SUPER-SMACK的介绍参见我以前的文章 ...

使用distpicker的简单测试页面

使用distpicker的简单测试页面相关推荐

最新文章

热门文章