-
原生js写三级联动 java_原生js三级联动的简单实现代码
2021-03-15 22:32:45本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市。实现过程:先调用百度地图的API来获取用户所在的城市,随后调用...本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下
实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市。
实现过程:先调用百度地图的API来获取用户所在的城市,随后调用聚合数据的天气API将数据放在页面上。由于ajax不支持跨域,所以采用了jsonp的方式来调用数据。
实现的原理比较简单,HTML和css比较长,我就只将js代码贴出来,想看完整代码的//调用jsonp函数请求当前所在城市
jsonp('https://api.map.baidu.com/api?v=2.0&ak=Dv1NMU23dh1sGS9n2tUouDEYY96Dfzh3&s=1&callback=getCity');
window.οnlοad=function(){
//请求天气车数据
btn.οnclick=function (){
jsonp(createUrl());
}
};
function getCity(){
function city(result){
jsonp(createUrl(result.name));
}
var cityName = new BMap.LocalCity();
cityName.get(city);
}
// 数据请求函数
function jsonp(url){
var script = document.createElement('script');
script.src = url;
document.body.insertBefore(script, document.body.firstChild);
document.body.removeChild(script);
}
//数据请求成功回调函数,用于将获取到的数据放入页面相应位置
function getWeather(response) {
var oSpan = document.getElementsByClassName('info');
var data = response.result.data;
oSpan[0].innerHTML=data.realtime.city_name;
oSpan[1].innerHTML=data.realtime.date;
oSpan[2].innerHTML='星期'+data.weather[0].week;
oSpan[3].innerHTML=data.realtime.weather.info;
oSpan[4].innerHTML=data.realtime.weather.temperature+'℃';
oSpan[5].innerHTML=data.realtime.wind.direct;
oSpan[6].innerHTML=data.realtime.weather.humidity+'%';
oSpan[7].innerHTML=data.realtime.time;
oSpan[8].innerHTML=data.life.info.ziwaixian[0];
oSpan[9].innerHTML=data.life.info.xiche[0];
oSpan[10].innerHTML=data.life.info.kongtiao[0];
oSpan[11].innerHTML=data.life.info.chuanyi[0];
var aDiv = document.getElementsByClassName('future_box');
for(var i=0; i
var aSpan = aDiv[i].getElementsByClassName('future_info');
aSpan[0].innerHTML = data.weather[i].date;
aSpan[1].innerHTML = '星期'+data.weather[i].week;
aSpan[2].innerHTML =data.weather[i].info.day[1];
aSpan[3].innerHTML = data.weather[i].info.day[2]+'℃';
}
changeImg(response);
}
//根据获取到的数据更改页面中相应的图片
function changeImg(data){
var firstImg = document.getElementsByTagName("img")[0];
var firstWeatherId=data.result.data.realtime.weather.img;
chooseImg(firstWeatherId,firstImg);
var aImg = document.getElementById('future_container').getElementsByTagName('img');
for(var j=0; j
var weatherId = data.result.data.weather[j].info.day[0];
chooseImg(weatherId,aImg[j]);
}
}
//选择图片
function chooseImg(id,index){
switch(id){
case '0':
index.src='images/weather_icon/1.png';
break;
case '1':
index.src='images/weather_icon/2.png';
break;
case '2':
index.src='images/weather_icon/3.png';
break;
case '3':
case '7':
case '8':
index.src='images/weather_icon/4.png';
break;
case '6':
index.src='images/weather_icon/6.png';
break;
case '13':
case '14':
case '15':
case '16':
index.src='images/weather_icon/5.png';
break;
case '33':
index.src='images/weather_icon/7.png';
break;
default:
index.src='images/weather_icon/8.png';
}
}
//根据城市名创建请求数据及url
function createUrl(){
var cityName = '';
if(arguments.length == 0) {
cityName = document.getElementById('text').value;
}else{
cityName = arguments[0];
}
var url = 'https://op.juhe.cn/onebox/weather/query?cityname=' + encodeURI(cityName) + '&key=1053d001421b886dcecf81a38422a1a2&callback=getWeather';
return url;
}
一个简单的小demo,还有很多不足之处,欢迎大家提出改进建议。
明天我会更新一下在这其中遇到的一些问题以及解决方法,欢迎关注。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持PHP中文网。
更多原生js三级联动的简单实现代码相关文章请关注PHP中文网!
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
-
原生js写三级联动 java_原生JS实现三级联动
2021-03-15 22:33:04代码实现JS的三级联动.js-demo {width: 700px;margin: 0 auto;padding-top: 100px;}select {margin-right: 50px;}省份:城市:区县:// ===== ===== ===== 获取select元素 ===== ===== =====// 获取下拉表单var ...代码实现
JS的三级联动.js-demo {
width: 700px;
margin: 0 auto;
padding-top: 100px;
}
select {
margin-right: 50px;
}
省份:
城市:
区县:
// ===== ===== ===== 获取select元素 ===== ===== =====
// 获取下拉表单
var select_province = document.getElementById('province');
var select_city = document.getElementById('city');
var select_county = document.getElementById('county');
// ===== ===== ===== 准备三级联动的数据 ===== ===== =====
// 省份
var arr_province = [
// 省份ID, 省份名称
{ id: 110000, name: '北京市' },
{ id: 120000, name: '天津市' },
{ id: 130000, name: '河北省' },
{ id: 140000, name: '山西省' },
{ id: 150000, name: '内蒙古自治区' },
{ id: 210000, name: '辽宁省' },
{ id: 220000, name: '吉林省' },
{ id: 230000, name: '黑龙江省' },
{ id: 310000, name: '上海市' },
{ id: 320000, name: '江苏省' }
];
// 城市
var arr_city = [
// 城市ID, 城市名称, 城市所属的省份(即本级的上一级的ID)
{ id: 110000, name: '北京市', province_id: 110000 },
{ id: 120000, name: '天津市', province_id: 120000 },
{ id: 320100, name: '南京市', province_id: 320000 },
{ id: 320200, name: '无锡市', province_id: 320000 },
{ id: 320300, name: '徐州市', province_id: 320000 },
{ id: 320400, name: '常州市', province_id: 320000 },
{ id: 320500, name: '苏州市', province_id: 320000 },
{ id: 320600, name: '南通市', province_id: 320000 },
{ id: 320700, name: '连云港市', province_id: 320000 },
{ id: 320800, name: '淮安市', province_id: 320000 }
];
// 区县
var arr_county = [
// 区县ID, 区县名称, 区县所属的城市(即本级的上一级的ID)
{ id: 110101, name: '东城区', city_id: 110000 },
{ id: 110102, name: '西城区', city_id: 110000 },
{ id: 110105, name: '朝阳区', city_id: 110000 },
{ id: 110106, name: '丰台区', city_id: 110000 },
{ id: 110107, name: '石景山区', city_id: 110000 },
{ id: 110108, name: '海淀区', city_id: 110000 },
{ id: 110109, name: '门头沟区', city_id: 110000 },
{ id: 110111, name: '房山区', city_id: 110000 },
{ id: 110112, name: '通州区', city_id: 110000 },
{ id: 110113, name: '顺义区', city_id: 110000 },
{ id: 110114, name: '昌平区', city_id: 110000 },
{ id: 110115, name: '大兴区', city_id: 110000 },
{ id: 110116, name: '怀柔区', city_id: 110000 },
{ id: 110117, name: '平谷区', city_id: 110000 },
{ id: 110118, name: '密云区', city_id: 110000 },
{ id: 110119, name: '延庆区', city_id: 110000 },
{ id: 320102, name: '玄武区', city_id: 320100 },
{ id: 320104, name: '秦淮区', city_id: 320100 },
{ id: 320105, name: '建邺区', city_id: 320100 },
{ id: 320106, name: '鼓楼区', city_id: 320100 },
{ id: 320111, name: '浦口区', city_id: 320100 },
{ id: 320113, name: '栖霞区', city_id: 320100 },
{ id: 320114, name: '雨花台区', city_id: 320100 },
{ id: 320115, name: '江宁区', city_id: 320100 },
{ id: 320116, name: '六合区', city_id: 320100 },
{ id: 320117, name: '溧水区', city_id: 320100 },
{ id: 320118, name: '高淳区', city_id: 320100 },
{ id: 320117, name: '溧水区', city_id: 320100 }
];
// ===== ===== ===== 给select填充数据的操作 ===== ===== =====
// 填充province
function addDataProvince() {
var html = "请选择省份";
var length = arr_province.length;
for (var i = 0; i < length; i++) {
html += "" + arr_province[i].name + "";
}
select_province.innerHTML = html;
}
// 填充city
function addDataCity(provinceId) {
var html = "请选择城市";
var length = arr_city.length;
for (var i = 0; i < length; i++) {
var obj = arr_city[i];
if (obj.province_id == provinceId) {
html += "" + obj.name + "";
}
}
select_city.innerHTML = html;
}
// 填充county
function addDataCounty(cityId) {
var html = "请选择区县";
var length = arr_county.length;
for (var i = 0; i < length; i++) {
var obj = arr_county[i];
if (obj.city_id == cityId) {
html += "" + obj.name + "";
}
}
select_county.innerHTML = html;
}
// ===== ===== ===== 给select绑定change事件 ===== ===== =====
// select_province绑定change事件
select_province.onchange = function () {
var provinceId = select_province.value;
addDataCity(provinceId);
};
// select_city绑定change事件
select_city.onchange = function () {
var cityId = select_city.value;
addDataCounty(cityId);
};
// select初始化数据
addDataProvince();
addDataCity(arr_province[0].id);
addDataCounty(arr_city[0].id);
/* 核心思想就是,通过监听上一级的变化获得上级的value,进而改变本级显示的列表内容。*/
效果图如下:
-
原生js写三级联动 java_原生js实现三级联动
2021-03-15 22:33:05Document请选择所在的省份浙江省山东省广东省甘肃省请选择所在的城市请选择所在的县区//按照省份的下拉列表的顺序定义二维数组 将城市列表对应到省份下var city=[["杭州市","温州市","宁波市","绍兴市"],//浙江省[...Document请选择所在的省份
浙江省
山东省
广东省
甘肃省
请选择所在的城市
请选择所在的县区
//按照省份的下拉列表的顺序定义二维数组 将城市列表对应到省份下
var city=[
["杭州市","温州市","宁波市","绍兴市"],//浙江省
["济南市","青岛市","济宁市","潍坊市"],//山东省
["广州市","潮阳","澄海","潮州"],//广东省
["兰州市","白银","敦煌","定西"]//甘肃省
];
//县区数组
var qu=[
[
["杭州一区","杭州二区"],
["温州一区","温州二区"],
["宁波一区","宁波二区"],
["绍兴一区","绍兴二区"]
],
[
["济南一区","济南二区"],
["青岛一区","青岛二区"],
["济宁一区","济宁二区"],
["潍坊一区","潍坊二区"],
],
[
["广州一区","广州二区"],
["潮阳一区","潮阳二区"],
["澄海一区","澄海二区"],
["潮州一区","潮州二区"],
],
[
["兰州一区","兰州二区"],
["白银一区","白银二区"],
["敦煌一区","敦煌二区"],
["定西一区","定西二区"],
]
];
var getProvince = document.forms['theform'].province;
var City = document.forms[0].city;
var Qu = document.forms[0].qu;
function getCity(){
// 初始化
Qu.length = 1;
City.length = 1;
// 获得 省份选择的项(索引值,0开始)
var getSelectIndex = getProvince.selectedIndex;
// 匹配选择省下面的 市区
var proCity = city[getSelectIndex-1]; //
console.log( proCity)
for( var i=0; i
City[i+1] = new Option(proCity[i],getSelectIndex)
}
}
function getQu(){
var getSelectIndex = getProvince.selectedIndex; // 省
var getCitySelectedIndex = City.selectedIndex; // 市
console.log( getCitySelectedIndex )
var cityQu = qu[getSelectIndex - 1][ getCitySelectedIndex - 1];
console.log( cityQu )
for( var i=0; i
Qu[i+1] = new Option(cityQu[0],getCitySelectedIndex)
}
}
-
原生js写三级联动 java_原生js实现省市区三级联动代码分享
2021-03-15 22:31:58前言插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star准备页面中的容器标签不限制,只需给个id就行var address = new Address({...前言
插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star
准备
页面中的容器标签不限制,只需给个id就行
var address = new Address({
wrapId: 'wrap',
showArr: ['provinces','citys','areas'],
beforeCreat:function(){
console.log("beforeCreat")
},
afterCreat:function(){
console.log('afterCreat');
}
})
wrapId:"wrap" // 此处的wrap就是上面容器的id
showArr: ['provinces','citys','areas'] // 此处分别代表省、市、区容器的id
举个例子:如果传递的数组['provinces','citys','areas']长度为3,那么将会出现省市区,数组中三个字符串分别是省、市、区容器的id
如传递的数组['provinces','citys']长度为2个,那么将会出现省市,数组中的两个字符串分别是省、市容器的id
如数组长度为1的时候就不说了
beforeCreat 插件开始创建前执行的回调函数
afterCreat 插件创建完成后执行的回调函数
预览
总结
如有什么功能需要增加的,可在评论区留言,我尽量满足。如有什么疏忽或错误,希望您指出。我会尽早修改,以免误导他人。
-
原生js写三级联动 java_原生JS实现三级联动 - osc_ao91jbnq的个人空间 - OSCHINA - 中文开源技术交流社区.....
2021-03-15 22:31:13代码实现JS的三级联动.js-demo {width: 700px;margin: 0 auto;padding-top: 100px;}select {margin-right: 50px;}省份:城市:区县:// ===== ===== ===== 获取select元素 ===== ===== =====// 获取下拉表单var ... -
java数组联动_纯js三维数组实现三级联动效果
2021-03-16 00:16:56本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下三级联动效果(纯JS实现)专业方向: --请选择专业--JAVAPHPUI班级名称: --请选择班级--学生姓名: --请选择学生--您选择的内容是: ... -
Java读取xml省市区三级联动_用js读取XML数据实现省市区的三级联动
2021-03-03 12:00:58/*** jQuery : 省市县联动插件* @author : liangjw* @email : liangjw0504@163.com* @example $("#test").province_city_county();* CopyRight:Create Family Wealth 2013*/$.fn.province_city_county = ... -
java ajax三级联动_Ajax实现三级联动省市查询
2021-03-08 04:12:52Ajax之三级联动效果图需求分析页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框选择省,则市下拉框中出现对应的省的下拉的市的信息,选择市,则区/县下拉框中出现对应的数据技术分析核心:ajax+... -
java实现三级联动查询_jeefast和Mybatis实现三级联动的示例代码
2021-03-22 18:13:53在二级联动的基础上html部分学校--请选择学校--{{v.name}}js部分getdayschool:function () {$.ajax({type: "post",url: baseurl + "platform/notice1/all123",contenttype: "application/json",success: function (r... -
3级联动 ajax java_ajax实现三级联动的基本方法
2021-03-13 15:54:38本文实例为大家分享了ajax实现三级联动的具体代码,供大家参考,具体内容如下1.首先在一个页面上布置一个div 方便日后引用方法//div的id为“sanji”2.sanji js处理页面$(document).ready(function(){//向div里面放三... -
distpicker.js 三级联动,修改地址时设置默认值
2019-03-08 23:12:49做java 后台的,半路出家 ,想做个自己的商城,卖点东西想着挣点外快,用到了js的三级联动,在网上找了很多,没找到解决的方法。只能想办法自己解决,想着留个备份,所以处女做作给js 啦~~主要考虑遍历、触发事件和... -
java实现省市区的联动_JavaScript实现省市区三级联动
2021-03-16 18:01:04本文实例为大家分享了JavaScript实现省市区三级联动的具体代码,供大家参考,具体内容如下首先是js$(document).ready(function(){getErpMarketByParentCode(0,'province',province);getErpMarketByParentCode... -
基于Java的ajax城市三级联动
2017-08-22 08:42:52ajax城市三级联动,网上搜的一个示例,找不到原著作者,在此抱歉。 首先是页面和JS代码 城市 * -
基于Redis Java代码实现的地区三级联动
2020-12-30 23:46:17基于Redis来实现的三级联动 技术栈:开发工具:idea ①Java基础(Servlet、servletContext监听器) ②NOsql ->Redis(java客户端Jedis) ③Ajax json ④jackson解析器 ⑤maven ⑥junit测试 ⑦jQuery 、js 前言:1.将... -
纯js三维数组实现三级联动效果
2020-12-10 12:56:12本文实例为大家分享了Android九宫格图片...三级联动效果(纯JS实现) 专业方向: <select name="sel1" id="sel1"> <option>--请选择专业-- <option>JAVA</option><option>PHP</option><option>UI</option> -
java的三级级联_jeefast和Mybatis实现三级联动的示例代码
2021-03-12 20:53:55在二级联动的基础上HTML部分学校--请选择学校--{{v.name}}JS部分getDaySchool:function () {$.ajax({type: "POST",url: baseURL + "platform/notice1/All123",contentType: "application/json",success: function (r... -
java中实现三级级联_SSH结合jquery实现三级联动效果
2021-03-10 04:13:11本文实例为大家分享了jquery实现三级联动的具体代码,供大家参考,具体内容如下jsp页面部分:选择楼栋:选择住房:js部分:function floor(){document.getElementById("build").options.length =0;document.... -
java省市区县审核,[Java教程]jQuery简单的省市区县三级联动案例
2021-03-26 13:27:49[Java教程]jQuery简单的省市区县三级联动案例0 2017-06-11 00:01:00简单的省市区三级联动,适合初学者入门学习的案例目录结构如下: 三级联动.html 跟 JS文件夹是同个级别效果图如下:HTML代码:1 2 *{margin:0;... -
java省市县联动插件_中国省市区三级联动Jquery插件
2021-03-14 03:07:33不管是网站还是app,这个都是需要掌握的,我们知道中国省市区三级联动的数据可以存储在mysql数据库中,也可以直接存储在distpicker.data.js这样的js文件中,下面来开始学习如何使用Jquery省市区三级联动插件。... -
Ajax三级联动操作的js代码
2019-10-09 08:14:23%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="... -
java web中实现select下拉框的三级联动(基于Ajax、JQuery)
2019-11-26 18:41:29java web中实现select下拉框的三级联动(基于Ajax、JQuery) web开发过程中有非常多的select元素的使用,因而其联动的效果是必不可少的。下面就为大家讲解一下它的实现。 本文链接: link. JS代码 利用jQuery技术在... -
jquery ajax java二级联动_jquery的ajax实现二级联动
2021-02-28 16:26:39第一步:引入struts整合json的插件包第二步:在struts.xml中定义:修改:修改成在Action中添加:第三步:页面使用jquery的ajax调用二级联动的js//ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位... -
js实现省市区三级联动
2017-09-07 20:03:28给大家推荐个靠谱的公众号程序员探索之路,大家一起加油 当省改变时--------市自动变为...java" import="java.util.*" pageEncoding="utf-8"%> <% String path = requ... -
js实现的年月日三级联动
2008-04-25 09:52:01java"]年默认加载到距离当前100年的年份,同时根据月份是否是闰年自动加载天数。。。 出生日期: var date=... -
省市县三级联动
2016-04-13 14:16:05省市县三级联动,包括 java + jsp + mysql 的实现方式,还有 dwr 实现方式,还有 js + html 实现方式 -
javascript三维数组的三级联动
2017-02-06 20:42:22三级联动效果(纯JS实现) 专业方向: --请选择专业-- JAVAPHPUI 班级名称: --请选择班级-- 学生姓名: --请选择学生-- 您选择的内容是: var myclass = [ [['JAVA班级01'],['JAVA班级... -
Java jQuery easyUI tree +struts2+hibernate +mysql 实现 三级联动的案例
2013-04-07 13:33:30${pageContext.request.contextPath }/js/jquery-1.9.1.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath . -
java 省级下拉列表_省市区三级联动下拉选框---具体功能实现
2021-03-16 14:48:11如图: 注: 此为从数据库中查询的省市区数据, 如果需要不涉及后台的JS实现省市区三级联动, 可查看: html部分:所在省市区:--选择省份----选择城市----选择地区--js部分:省市区通过异步查询数据库获得. 其中,DISTRICT_...