HTML經過jQuery傳值賦值

時間 2019-11-11

標籤 html 經過 jquery 賦值欄目 HTML 简体版

原文原文鏈接

網頁傳值很常見，若是經過動態網頁傳值，咱們很容易實現。可是若是靜態網頁傳值，這個就要找資料，方法或者詢問大牛們了。這個原來還真的沒有作過。今天一同事須要作這個相似的功能，應該是昨天了。原本是昨天寫的，可是下班了，沒有完成。回家了，今天特地來把這個記錄完成吧。也是新年第一篇，頗有意義哦。開始吧。javascript

須要作的是A.html頁面傳值過去，B.html頁面接收並在頁面顯示出來。很簡單的，作了以後其實也是很簡單的。只是沒有作過，就認爲很難了。來幾個圖片吧，咱們才能知道真正須要作什麼。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頁面。java

<!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頁面了。jquery

其實着重是看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>