首页获得会议室房间名称
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <!-- 引入 layui.css --> 8 <!-- 第三方 CDN 方式引入 --> 9 <!-- <link rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/layui.css"> --> 10 <!-- 本地引用 --> 11 <link rel="stylesheet" href="./layui-main/dist/css/layui.css" media="all"> 12 <title>首页</title> 13 <style type="text/css"> 14 .ui_button { 15 background-color: rgb(73, 73, 221); 16 color: #ffffff; 17 border: rgb(51, 51, 235); 18 font-size: 20px; 19 } 20 21 </style> 22 </head> 23 <body width=100% height=100% onl oad="RoomList()" style="background-color: rgb(202, 104, 12);"> 24 <div class="layui-btn-container"> 25 <!-- <button type="button" class="layui-btn">默认按钮</button> --> 26 </div> 27 <div> 28 <!-- <svg width="800" height="800" version="1.1" xmlns=""> 29 <rect width="700" height="400" x="100" y="200" rx="10" ry="10" style="fill:rgb(255, 254, 253)"></rect> 30 <div style="text-align: left; margin-top: 50px;position: absolute; left: 300px; top: 180px;font-size: 20px; font-weight: bolder;"> 31 <img src="./logo.jpg" alt="图片加载错误！" width="319" height="72" id="img01"> 32 </div> 33 <div id="RoomList" style="text-align: left; margin-top: 50px;position: absolute; left: 300px; top: 300px;font-size: 20px; font-weight: bolder;"> 34 35 </div> 36 37 </svg> --> 38 39 <svg width=100% height=800 version="1.1" xmlns=""> 40 <rect width=40% height=50% x=30% y="200" rx="10" ry="10" style="fill:rgb(255, 254, 253)"></rect> 41 <div style="text-align: left; margin-top: 50px;position: absolute; width: 30%; height: 50%; left:40%; top: 180px;font-size: 20px; font-weight: bolder;"> 42 <img src="./logo.jpg" alt="图片加载错误！" width=60% id="img01"> 43 </div> 44 <div id="RoomList" style="text-align: left; margin-top: 50px;position: absolute; width: 40%; left:40%; top: 300px;font-size: 20px; font-weight: bolder;"> 45 </div> 46 47 <div class="layui-btn-container"> 48 <button class="layui-btn layui-btn-sm" onclick="buttonJump()" type="button" style="position: fixed; width: 3%; left:57%; top: 400px;font-size: 18px">进入</button> 49 </div> 50 </svg> 51 52 53 54 </div> 55 56 <!-- 接口调用 --> 57 <script> 58 function RoomList(){ 59 60 getAjax('get','https://api.consineegroup.net:8082/api/meetingRoom/getMeetingRoomList?unionId=SITNUTeTlFSERhs8nd8MbAiEiE',function(res){ 61 62 var roomNameHtml = '<option>选择会议室</option>' + '<option value= "' + res[0].roomId + '">' + res[0].roomName + '</option>'; 63 var roomIdHtml = res[0].roomId + ','; 64 65 for(var i=1; i<res.length; i++) 66 { 67 //roomNameHtml += '<option value = "http://192.168.41.86:5500/Hello%20World.html">' + res[i].roomName + '</option>'; 68 roomNameHtml += '<option value= "' + res[i].roomId + '">' + res[i].roomName + '</option>'; 69 roomIdHtml += res[i].roomId + ','; 70 } 71 // roomNameHtml = '<select id="room" style="width: 300px; height: 30px;">' + roomNameHtml + '</select>'; 72 roomNameHtml = '<select id="room" style="width: 50%; height: 30px;">' + roomNameHtml + '</select>'; 73 // 选中下拉框直接传值调用函数跳转 74 // roomNameHtml = '<select id="room" onchange="myFunction(this.options[this.selectedIndex].value, this.options[this.selectedIndex].text)" style="width: 300px; height: 30px;">' + roomNameHtml + '</select>'; 75 // js给下拉列表赋值 76 document.getElementById("RoomList").innerHTML = roomNameHtml; 77 78 var myselect = document.getElementById("room"); 79 console.log(myselect); 80 var index = myselect.selectedIndex; 81 var room = myselect.options[index].value; 82 }); 83 84 } 85 86 function getAjax(method,url,callback){ 87 const xhr = new XMLHttpRequest(); 88 xhr.open(method,url); 89 xhr.send(); 90 91 xhr.onreadystatechange = function(){ 92 93 if(xhr.readyState === 4 ){ 94 if(xhr.status == 200){ 95 const res = JSON.parse(xhr.response); 96 callback(res.content); 97 } 98 } 99 100 } 101 102 } 103 // // 下拉框选中时直接调用实现跳转 104 function myFunction(value, text) { 105 console.log(value, text); 106 // 将获取到的id,name以JSON字符串形式存储在浏览器 107 var SelectRoom = {"roomId": value, "roomName": text}; 108 localStorage.setItem("SelectRoom", JSON.stringify(SelectRoom)); 109 110 console.log(SelectRoom.roomName); 111 // // 跳转 112 window.location.href="http://192.168.41.86:5500/test.html"; 113 } 114 // 点击按钮再跳转 115 function buttonJump(){ 116 var dropDown = document.getElementById('room'); 117 var selectValue = dropDown.options[dropDown.selectedIndex].value; 118 var selectText = dropDown.options[dropDown.selectedIndex].text; 119 if(selectText == '选择会议室'){ 120 alert("请先选择会议室"); 121 return; 122 } 123 myFunction(selectValue, selectText); 124 125 } 126 </script> 127 128 </body> 129 </html>
标签：function,web,会议室,res,xhr,智能,roomNameHtml,var From： https://www.cnblogs.com/mengweilong/p/17414374.html