javascript传递参数到html页面示例

最新推荐文章于 2024-06-20 21:30:34 发布

菜鸟叮咚糖

最新推荐文章于 2024-06-20 21:30:34 发布

阅读量5.3k

点赞数

分类专栏： Html+css

本文链接：https://blog.csdn.net/qq_24484085/article/details/78078785

版权

Html+css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">

		<title>javascript传递参数到html页面示例</title>
	</head>

	<body>
		<select id="fruit">
			<option value="苹果">苹果</option>
			<option value="香蕉">香蕉</option>
			<option value="李子">李子</option>

		</select>
		<a href="" id="chooseurl">这是一个动态的网址 根据你的选择会跳转到不同的网站</a>
		<button type="submit" οnclick="check()">查看选择</button>
	</body>
	<!-- 需要引入jquery-->
	<script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
	
	<script type="text/javascript">
		function check() {
			var options = $("#fruit option:selected");
			var choosefruit = options.val();
			alert("你选择的水果是：" + choosefruit);
			
	
			if(choosefruit=="苹果"){
				var url= "http://www.apple.com";
				//通过id找到位置  href表示属性,表示参数
				$("#chooseurl").attr("href", url);
			}
			
			if(choosefruit=="香蕉"){
				var url= "http://www.mi.com";
				$("#chooseurl").attr("href", url);
			}
			
			if(choosefruit=="李子"){
				var url= "http://www.baidu.com";
				$("#chooseurl").attr("href", url);
			}
			
		}
	</script>
</html>