網頁傳值很常見，如果通過動態網頁傳值，我們很容易實現。但是如果靜態網頁傳值，這個就要找資料，方法或者詢問大牛們了。這個原來還真的沒有做過。今天一同事需要做這個類似的功能，應該是昨天了。本來是昨天寫的，但是下班了，沒有完成。回家了，今天特意來把這個記錄完成吧。也是新年第一篇，很有意義哦。開始吧。
需要做的是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>
最終達到的效果是。如下圖。
整個功能算是完成了。
新年第一篇也完成了。
每次記錄都是有收穫的，雖然簡單，畢竟經歷。