select动态插入值、跨页面传值

最新推荐文章于 2023-03-10 14:16:45 发布

半岁律政

最新推荐文章于 2023-03-10 14:16:45 发布

阅读量524

点赞数

分类专栏：我的前端文章标签： html jquery

本文链接：https://blog.csdn.net/weixin_39492135/article/details/110051124

版权

我的前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、select下拉框动态添加下拉框选项

想在下拉框框中显示从数据库中读取的内容，当数据库中内容改变时，网页上下拉框的内容也随之改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script>
			function addDisplay(){
				var a = new Array("11111", "22222", "33333");
					for (i = 1; i < 4; i++) {
						var op = new Option();
							op.text = a[i - 1];
							op.value = i;
							mySelect.options.add(op);
						}
					} 
		</script>
	</head>
	<body>
		<form>
			请选择:
			<select id="mySelect">
				<option value="0">苹果</option>
				<option value="1">香蕉</option>
				<option value="2">菠萝</option>
			</select>
		</form>
		<input type="button" onclick = "addDisplay()" value="clickHere">
		 </body> 
</html>

2、html跨页面传值

从page1.html向page2.html传递值

page1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>页面跳转</title>
		<script src="js/jquery.min.js"></script>

	</head>
	<body>
		<button id="btn" onclick="jump()">跳转</button>
		<script>
			function jump(){
				var name = "zhangsan";
				var age = 12;
				url = "page2.html?name="+name+"&age="+age;
				window.location.href = url;
			}
		</script>
	</body>

page2.html

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery.min.js"></script>
		<script src="myJs/jquery.params.js"></script>
		<meta charset="utf-8">
		<title>读取值</title>
	</head>
	<body>
		<script>
			var name = $.query.get("name");
			var age = $.query.get("age");
			alert(name+"  "+age);
		</script>
	</body>
</html>