HTML通过jQuery传值赋值
网页传值很常见，如果通过动态网页传值，我们很容易实现。但是如果静态网页传值，这个就要找资料，方法或者询问大牛们了。这个原来还真的没有做过。今天一同事需要做这个类似的功能，应该是昨天了。本来是昨天写的，但是下班了，没有完成。回家了，今天特意来把这个记录完成吧。也是新年第一篇，很有意义哦。开始吧。
需要做的是A.html页面传值过去，B.html页面接收并在页面显示出来。很简单的，做了之后其实也是很简单的。只是没有做过，就认为很难了。来几个图片吧，我们才能知道真正需要做什么。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table>
<tr><td>酒店一</td><td><a href="jieshou.html?date=2015-1-13&zhi=bbc">预订</a></td></tr>
<tr><td>酒店二</td><td><a href="jieshou.html?date=2015-1-12&zhi=aaa||bbb">预订</a></td></tr>
<tr><td>酒店三</td><td><a href="jieshou.html?date=2015-1-15&zhi=aaa||ccc||ddd">预订</a></td></tr>
</table>
</body>
</html>
这就是A.html页面。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
日期：<input type="text" id="date"/ ><br />
酒店列表：<select id="hotellist" name="hotellist" style="width:120px; "></select>
</body>
</html>
这当然是B.html页面了。
其实着重是看B页面了，上面还没有写实现的js方法，方法是从网上找的，结合自己的需求稍稍的修改了部分。实现了。现在把它贴出来吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../rili/rili/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
//获取URL所有参数
function GetUrlParms() {
var args = new Object();
var query = location.search.substring(1); //获取查询串
var pairs = query.split("&"); //在逗号处断开
for (var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('='); //查找name=value
if (pos == -1) continue; //如果没有找到就跳过
var argname = pairs[i].substring(0, pos); //提取name
var value = pairs[i].substring(pos + 1); //提取value
args[argname] = unescape(value); //存为属性
}
return args;
}
$(document).ready(function () {
var args = new Object();
args = GetUrlParms();//获取参数数组
//如果要查找参数key:
if (args["date"] != undefined) {
//如果要查找参数key:
var value1 = args["date"];
$("#date").val(value1);//赋值
}
if (args["zhi"] != undefined) {
//如果要查找参数key:
var value2 = args["zhi"];
var pairs = value2.split("||"); //把值单个提取出来
var obj = document.getElementById('hotellist');//获取要插入值的select元素
for (var i = 0; i < pairs.length; i++) {
// obj.add(new Option("文本", "值")); //这个只能在IE中有效
obj.options.add(new Option(pairs[i], "zhi" + i)); //这个兼容IE与firefox 动态创建option
}
} });
</script>
</head>
<body>
日期：<input type="text" id="date"/ ><br />
酒店列表：<select id="hotellist" name="hotellist" style="width:120px; "></select>
</body>
</html>
最终达到的效果是。如下图。
整个功能算是完成了。
新年第一篇也完成了。
每次记录都是有收获的，虽然简单，毕竟经历。
HTML通过jQuery传值赋值的更多相关文章
- php地址赋值值和传值赋值
下面这是php的赋值的两种方式: <?phpheader("Content-Type: text/html;charset=utf-8");$a="我是原始数据a& ...
- frame与frame之间怎么用jquery传值
frame与frame之间如何用jquery传值 使用jquery操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...< ...
- PHP变量传值赋值和引用赋值，变量销毁
<?php $a = 100; $b = 200; var_dump($a,$b); //int(100) int(200) ?> php中,上面的代码,变量是怎么存放的呢? 上面的代码变 ...
- Js的引用赋值与传值赋值
要说js的赋值方式时首先要说明js的数值类型:基本类型和引用类型. 1.基本类型 基本的数据类型有:undefined,boolean,number,string,null. 基本类型存放在栈区,访问 ...
- jquery：赋值
Jquery的赋值语句 $("#txtStyle").val(value); 获取操作: var val = $('#test').val(); --
- bootstrapValidator关于js,jquery动态赋值不触发验证（不能捕获“程序赋值事件”）解决办法
//触发oninput事件 //propertychange 兼容ie678 $('#captainName').on('input propertychange', function() { }); ...
- JS 的引用赋值与传值赋值
这个问题说大不大说小不小,如果你有幸踩了这个坑,一定会找这篇文章,哈哈~ 现说一下JS数字的类型:基本类型和引用类型 先看下下面两个栗子: var a = 30; var b = a; a = 20; ...
- jquery input 赋值和取值
记录一下: 在写一个input赋值,二话不说就直接利用了$('#xx').val()来进行取值和赋值,取值ok,赋值后利用alert显示正确,但是在html上并没有正确的显示出来,后来改为使用如下代码 ...
- jquery numberbox赋值
numberbox不能使用$('#id').val( '');只能使用$('#id').numberbox('setValue','');
随机推荐
- kubernetes elasticsearch2.4 集群安装
一.制作docker镜像: Dockerfile文件: FROM alpine:latest MAINTAINER chengcuichao RUN apk update && apk ...
- Java设计原则—迪米特法则(转)
定义: 迪米特法则(Law of Demeter,LoD)也称为最少知识原则(Least Knowledge Principle,LKP). 一个对象应该对其他对象有最少的了解.通俗地讲,一个类应该对 ...
- session、cookie、token
各自应用场景考虑session.token.cookie是不是有各自的应用场景,比如传统项目适合用session和cookie单页应用适合用token分布式适合用token等等 token如果非要选择 ...
- 【android】来电悬浮窗
先看下效果图 说下思路: 1:监听来电广播 2:根据来电号码,和本地数据库做匹配,有记录的,则提取出头像.名字.职位,生成悬浮窗 3:监听来电广播,如果当前行为是空闲的(没有任何通话行为),则删除掉悬 ...
- Win10应用《纸书科学计算器》更新啦！
<纸书科学计算器>在2016年8月拿了计算机设计大赛国家一等奖,现在仍记得我在答辩时还给评委们普及了一波UWP平台的知识.受此鼓励,这款应用也不会停下更新的脚步^_^.最近从1.9小幅升级 ...
- 分布式远程服务调用(RPC)框架
分布式远程服务调用(RPC)框架 finagle:一个支持容错,协议无关的RPC系统 热门度(没变化) 10.0 活跃度(没变化) 10.0 Watchers:581 Star:6174 Fork: ...
- linux上使用wget下载文件
首次安装的centos操作系统是没有安装wget的,所以首先需要先安装wget,然后才能使用wget下载文件. 1.第一步,保证centos能正常连网.使用命令 :yum -y install wg ...
- iOS开发之HelloKit代码片段
完整代码托管:https://github.com/1042710553/HelloKit.git /************************/plist/****************** ...
- css 中 transition 需要注意的问题
cubic-bezier 是 transition-timing-function 的值的一种. 四个参数的关系式如下(t 代表时间,取值范围 [0, 1]):P0(1-t)3 + 3P1t(1-t) ...
- 刷新DNS解析缓存
为了提高网站的访问速度,系统会在成功访问某网站后将该网站的域名.IP地址信息缓存到本地.下次访问该域名时直接通过IP进行访问. 一些网站的域名没有变化,但IP地址发生变化,有可能因本地的DNS缓存没有 ...