HTML通过jQuery传值赋值

最新推荐文章于 2021-06-16 02:34:34 发布

weixin_30487201

最新推荐文章于 2021-06-16 02:34:34 发布

阅读量137

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/annabook/p/4220566.html

版权

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

需要做的是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>

最终达到的效果是。如下图。

整个功能算是完成了。

新年第一篇也完成了。

每次记录都是有收获的，虽然简单，毕竟经历。

转载于:https://www.cnblogs.com/annabook/p/4220566.html

weixin_30487201

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML通过jQuery传值赋值

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

扫一扫