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