<head>
<title>1.html</title>
</head>
<body>
<form action="">
<select name="请假类型" style="width:400px ;height: 70px;font-size: 30px;background-color: white;">
<option value="" ></option>
<option value="volvo"" >事假</option>
<option value="saab" ">病假</option>
<option value="fiat" ">晚自习请假</option>
<option value="audi" ">晨读请假</option>
</select>
</form>
<button >提交请假</button>
</form>
</body>
<script type="text/javascript">
</script>
这是1.html
<head>
<title></title>
</head>
<body>
类型为
</body>
这是2.html
各位xd我想实现前面那些选择那些请假类型,然后点击按钮,跳转到2.html中,选中的数据也能被传过去
如有帮助,麻烦点个【采纳此答案】谢谢了
1.html
<!DOCTYPE html>
<html>
<head>
<title>1.html</title>
</head>
<body>
<form action="">
<select name="请假类型" id="Select" style="width:400px ;height: 70px;font-size: 30px;background-color: white;">
<option value="" ></option>
<option value="volvo"" >事假</option>
<option value="saab" ">病假</option>
<option value="fiat" ">晚自习请假</option>
<option value="audi" ">晨读请假</option>
</select>
</form>
<button id="btn">提交请假</button>
</form>
<script type="text/javascript">
var btn = document.getElementById('btn')
var select = document.getElementById('Select')
btn.onclick = function(){
console.log('00',select.value)
window.location.href = "./2.html?id="+select.value
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
类型为<span id="type"></span>
<script>
//获取参数的方法
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
}
}
console.log(theRequest)
var label = ''
switch (theRequest.id) {
case "volvo":
label = '事假'
break;
case "saab":
label = '病假'
break;
case "fiat":
label = '晚自习请假'
break;
default:
label = '晨读请假'
break;
}
console.log(label)
var type = document.getElementById('type')
type.innerHTML = label
</script>
</body>
</html>