js获取交易表单下拉框选中的值

最新推荐文章于 2022-08-22 14:34:05 发布

若年封尘

最新推荐文章于 2022-08-22 14:34:05 发布

阅读量2k

点赞数 6

分类专栏：前端 # JavaScript 文章标签： JavaScript 下拉框 js表单 js下拉框选中

本文链接：https://blog.csdn.net/zag666/article/details/103104064

版权

前端同时被 2 个专栏收录

128 篇文章 11 订阅

订阅专栏

JavaScript

46 篇文章 3 订阅

订阅专栏

实验任务：

1、网页标题：我的交易表单
2、在页面上创建一个表单用户界面，供用户挑选配置一台计算机。例如：CPU、内存、硬盘、主板、显卡、机箱、光驱等。不同型号的产品价格不同，当用户改变所选配件的同时，计价程序自动计算新的价格，并且通过告警对话框或文本框来通知用户目前所选择的计算机配件的总价。
（1）采用内嵌式引入JavaScript
（2）计算机各配件的型号用下拉列表方式供用户选择，每个标签的value属性取值为该型号的单价，默认选项为“未选”，其value属性取值为0
（3）在JavaScript中，计算机配件的总价使用自定义函数total()进行计算，并通过告警对话框显示，格式为：
alert(“总价为：”+total);
（4）在JavaScript中使用document.getElementById(“ID名称”)的方法获取表单对象，例如获取cpu的选择价格，可以使用
cpu = Number(document.getElementById(“cpu”).value);
（5）自定义界面布局及样式

浏览器显示效果：

在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的交易表单</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background: url("http://pic.netbian.com/uploads/allimg/190305/232042-15517992421363.jpg");
			background-size: 100%;
		}
		table{
			width: 50%;
			height: 320px;
			margin: 15px auto;
			font-size: 26px;
			text-align: center;
			border-radius: 10px;
			color: #00ffe7;
		}
		caption{
			font-family: "楷体";
			font-size:40px;
		}
		table select{
			font-size: 25px;
			font-weight: bold;
			height: 100%;
			text-align: center;
			cursor: pointer;
			color: #0095ff;
		}
		button{
			width: 200px;
			height: 76%;
			line-height: 76%;
			font-size: 26px;
			font-weight: bold;
			font-family: "楷体";
			color: #0095ff;
			border-radius: 6px;
		}
		.else{
			font-size: 20px;
			color: red;
			height: 30px;
			line-height: 30px;
			width: 400px;
			position: absolute;
			top: 655px;
			left: 1130px;
		}
	</style>
	<script type="text/javascript">
		function CPU_price(){
			CPU=Number(document.getElementById("CPU").value);
			switch(CPU){
				case 0 :
				document.getElementById("price1").innerHTML="0元";
				break;
				case 1199:
				 document.getElementById("price1").innerHTML="1199元";
				break;
				case 2210:
				 document.getElementById("price1").innerHTML="2210元";
				break;
				case 4099:
				document.getElementById("price1").innerHTML="4099元";
				break;
			}
			price1=document.getElementById("price1").innerHTML;
		}
		function RAM_price(){
			RAM=Number(document.getElementById("RAM").value);
			switch(RAM){
				case 0 :
				document.getElementById("price2").innerHTML="0元";
				break;
				case 259:
				 document.getElementById("price2").innerHTML="259元";
				break;
				case 699:
				 document.getElementById("price2").innerHTML="699元";
				break;
				case 1848:
				document.getElementById("price2").innerHTML="1848元";
				break;
			}
			price2=document.getElementById("price2").innerHTML;
		}		
		function HDD_price(){
			HDD=Number(document.getElementById("HDD").value);
			switch(HDD){
				case 0 :
				document.getElementById("price3").innerHTML="0元";
				break;
				case 289:
				 document.getElementById("price3").innerHTML="289元";
				break;
				case 699:
				 document.getElementById("price3").innerHTML="699元";
				break;
				case 4299:
				document.getElementById("price3").innerHTML="4299元";
				break;
			}
			price3=document.getElementById("price3").innerHTML;
		}
		function MB_price(){
			MB=Number(document.getElementById("MB").value);
			switch(MB){
				case 0 :
				document.getElementById("price4").innerHTML="0元";
				break;
				case 339:
				 document.getElementById("price4").innerHTML="339元";
				break;
				case 799:
				 document.getElementById("price4").innerHTML="799元";
				break;
				case 1599:
				document.getElementById("price4").innerHTML="1599元";
				break;
			}
			price4=document.getElementById("price4").innerHTML;
		}	
		function VGA_price(){
			VGA=Number(document.getElementById("VGA").value);
			switch(VGA){
				case 0 :
				document.getElementById("price5").innerHTML="0元";
				break;
				case 1549:
				 document.getElementById("price5").innerHTML="1549元";
				break;
				case 2699:
				 document.getElementById("price5").innerHTML="2699元";
				break;
				case 14000:
				document.getElementById("price5").innerHTML="14000元";
				break;
			}
			price5=document.getElementById("price5").innerHTML;
		}	
		function total(){
			total=parseInt(price1)+parseInt(price2)+parseInt(price3)+parseInt(price4)+parseInt(price5);
			alert("总价为："+total+"元");
			document.getElementById("total").innerHTML=total;
		}
	</script>
</head>
<body>
	<div class="container">
		<form method="get">
		<table border="2px">
			<caption>计算机配置交易表单</caption>
			<tr>
				<th>配置</th>
				<th>CPU</th>
				<th>内存</th>
				<th>硬盘</th>
				<th>主板</th>
				<th>显卡</th>
			</tr>
			<tr>
				<td>
					型号
				</td>
				<td>
					<select id="CPU" onchange="CPU_price()"><!-- CPU -->
						<option value="0" selected="selected">未选</option>
						<option value="1199">酷睿i5 9400F</option>
						<option value="2210">酷睿i7 8700K</option>
						<option value="4099">酷睿i9 9900K</option>
					</select>
				</td>
				<td>
					<select id="RAM" onchange="RAM_price()"><!-- 内存 -->
						<option value="0" selected="selected">未选</option>
						<option value="259">科赋BOLT X</option>
						<option value="699">芝奇Ripjaws V</option>
						<option value="1848">芝奇Trident Z</option>
					</select>
				</td>
				<td>
					<select id="HDD" onchange="HDD_price()"><!-- 硬盘 -->
						<option value="0" selected="selected">未选</option>
						<option value="289">东芝500GB</option>
						<option value="699">希捷Laptop 4TB</option>
						<option value="4299">希捷BarraCuda</option>
					</select>
				</td>
				<td>
					<select id="MB" onchange="MB_price()"><!-- 主板 -->
						<option value="0" selected="selected">未选</option>
						<option value="339">华擎A320M-HDV</option>
						<option value="799">技嘉B450M DS3H</option>
						<option value="1599">技嘉Z390 AORUS</option>
					</select>
				</td>
				<td>
					<select id="VGA" onchange="VGA_price()"><!-- 显卡 -->
						<option value="0" selected>未选</option>
						<option value="1549">铭瑄 GeForce GTX</option>
						<option value="2699">AMD Radeon RX 5700</option>
						<option value="14000">华硕ROG STRIX-RTX</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>价格</td>
				<td id="price1"></td>
				<td id="price2"></td>
				<td id="price3"></td>
				<td id="price4"></td>
				<td id="price5"></td>
			</tr>
			<tr>
				<td>总价</td>
				<td colspan="5" id="total"><button onclick="total()">点击显示总价</button></td>
			</tr>
		</table>
	</form>
	</div>
	<div class="else">温馨提示：点击选择型号后会显示对应价格</div>
</body>
</html>