网页传值很常见，如果通过动态网页传值，我们很容易实现。但是如果静态网页传值，这个就要找资料，方法或者询问大牛们了。这个原来还真的没有做过。今天一同事需要做这个类似的功能，应该是昨天了。本来是昨天写的，但是下班了，没有完成。回家了，今天特意来把这个记录完成吧。也是新年第一篇，很有意义哦。开始吧。

需要做的是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传值赋值的更多相关文章

  1. php地址赋值值和传值赋值

    下面这是php的赋值的两种方式: <?phpheader("Content-Type: text/html;charset=utf-8");$a="我是原始数据a& ...

  2. frame与frame之间怎么用jquery传值

    frame与frame之间如何用jquery传值 使用jquery操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...< ...

  3. PHP变量传值赋值和引用赋值，变量销毁

    <?php $a = 100; $b = 200; var_dump($a,$b); //int(100) int(200) ?> php中,上面的代码,变量是怎么存放的呢? 上面的代码变 ...

  4. Js的引用赋值与传值赋值

    要说js的赋值方式时首先要说明js的数值类型:基本类型和引用类型. 1.基本类型 基本的数据类型有:undefined,boolean,number,string,null. 基本类型存放在栈区,访问 ...

  5. jquery：赋值

    Jquery的赋值语句 $("#txtStyle").val(value); 获取操作: var val = $('#test').val(); --

  6. bootstrapValidator关于js,jquery动态赋值不触发验证（不能捕获“程序赋值事件”）解决办法

    //触发oninput事件 //propertychange 兼容ie678 $('#captainName').on('input propertychange', function() { }); ...

  7. JS 的引用赋值与传值赋值

    这个问题说大不大说小不小,如果你有幸踩了这个坑,一定会找这篇文章,哈哈~ 现说一下JS数字的类型:基本类型和引用类型 先看下下面两个栗子: var a = 30; var b = a; a = 20; ...

  8. jquery input 赋值和取值

    记录一下: 在写一个input赋值,二话不说就直接利用了$('#xx').val()来进行取值和赋值,取值ok,赋值后利用alert显示正确,但是在html上并没有正确的显示出来,后来改为使用如下代码 ...

  9. jquery numberbox赋值

    numberbox不能使用$('#id').val( '');只能使用$('#id').numberbox('setValue','');

随机推荐

  1. scala drools and map

    需求,安全检查,例如Linux系统,用户安全检查,配置项检查等,这些检查的规则在Drools里面去实现,数据传送过来即可, 问题:如何定义数据结构,不同的检查项会有不同的数据结构,如何规范呢? 思路: ...

  2. C#打印类

    using System;using System.Collections.Generic;using System.Text;using System.Windows.Forms;using Sys ...

  3. Java反射在整个程序运行中的位置

    ①java的核心机制 java有两种核心机制:java虚拟机(JavaVirtual Machine)与垃圾收集机制(Garbage collection): ①Java虚拟机:是运行所有Java程序 ...

  4. JVM(3) 垃圾回收器与内存分配策略

    文章内容摘自:深入理解java虚拟机 第三章   对象已死? 1. 引用计数算法: 给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1:当引用失效时,计数器值就减1:任何时刻计数器为0 ...

  5. python3_UUID模块详解

    1.知识背景 UUID是128位的全局唯一标识符,通常有32字节的字母表示.它可以保证时间和空间的唯一性. UUID——Universally unique identifier 在python中叫U ...

  6. Ubuntu16.04安装印象笔记

    Nixnote 是一个 Evernote 开源客户端,原名 Nevernote.Evernote 是一个著名的笔记等个人资料整理和同步软件, 因为 Evernote 没有 Linux 下的官方版本,因 ...

  7. 搭建Firekylin博客

    搭建步骤 1).安装 Node.js curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash - yum - ...

  8. 巨坑：jqgrid竟然取不到编辑模式下input的值

    今天遇到最奇葩的问题,竟然取不到input的值,感觉世界观都颠覆了.后来一搜资料,又是jqgrid框架搞的鬼,真搞不明白,开发框架就好好开发框架,留这么多坑有意思吗? jqgrid编辑模式下不要调用g ...

  9. JavaScript常用算法

    一.排序算法 1.Array.sort(function)(JavaScript原生排序算法)参数:比较函数(可选)若无参数,则按照首字母的ASCII码排序,比较函数的作用为确定排序 function ...

  10. Jquery4 过滤选择器

    学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似 CSS3里的伪类,可以让不支持 CSS3 ...