JS动态添加下拉框

最新推荐文章于 2025-07-08 21:06:16 发布

原创最新推荐文章于 2025-07-08 21:06:16 发布 · 7.9k 阅读

4 ·

CC 4.0 BY-SA版权

【JavaScript】专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现动态添加下拉框的功能，通过选择车类型、车颜色和车轮来实现汽车配置的选择过程。具体展示了如何在页面加载时初始化下拉框，并根据用户选择动态更新其他相关选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：

页面初加载时：

选择车类型后：

选择车颜色后：

JS实现下拉框的动态添加，网页代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态添加下拉框</title>
<script type="text/javascript" src="../JS文件/jquery.js"></script>
<script type="text/javascript" src="../JS文件/SelectMenu2.js" charset=“utf-8”></script>
</head>

<body>
	<form action="#">
		<br />
		<br />
		<br />
		<div class="CarInfo">
		
			<span class="CarType">车类型：
				<select >
					<option value="请选择" selected="selected">请选择</option>
					<option value="宝马">宝马</option>
					<option value="奔驰">奔驰</option>
				</select>
			</span>
			
			<span class="CarColor" style="display:none">车颜色：
				<select>
				</select>
			</span>
			
			<span class="CarWheel" style="display:none">车轮：
				<select>
				</select>
			</span>
		</div>
	</form>
</body>
</html>

JS代码如下：

// JavaScript Document
$(document).ready(function (){

	var CarTypeSelect = $(".CarType").children("select");
	var CarColorSelect = $(".CarColor").children("select");
	var CarWheelSelect = $(".CarWheel").children("select");
	
	
	//给第一个下拉框的SelectChanged时间编码
	CarTypeSelect.change(function (){
		
		//取得当前下拉框的值
		var CarTypeValue = $(this).val();
		//当第一个下拉框内容改变的时候，第三个下拉框要隐藏起来
		CarWheelSelect.parent().hide();
		
		if(CarTypeValue !="")
		{
			CarColorSelect.html("");
			$("<option value = ''>请选择</option>").appendTo(CarColorSelect);
			switch(CarTypeValue){
				
				case "宝马":
					var CarColor=["绿色","黑色"];
					for(var i = 0;i<CarColor.length;i++){
						$("<option value='"+CarColor[i]+"'>" + CarColor[i] + "</option>").appendTo(CarColorSelect);	
					}
					break;
				case "奔驰":
					var CarColor = ["白色","红色"];
					for(var i = 0;i<CarColor.length;i++){
						$("<option value='"+CarColor[i]+"'>" + CarColor[i] + "</option>").appendTo(CarColorSelect);	
					}
					break;
			}
			CarColorSelect.parent().show();
		}
		else
		{
				CarColorSelect.parent().hide();
		}
	});
	
	CarColorSelect.change(function (){
									
		var CarColorValue = $(this).val();								
		CarWheelSelect.html("");
		if(CarColorValue != "")
		{
			CarWheelSelect.html("");
			$("<option value = ''>请选择</option>").appendTo(CarWheelSelect);
			switch(CarColorValue){
				
				case "绿色":
					var CarWheel = ["绿钢","绿碳纤维"];
					for(var i = 0;i<CarWheel.length;i++){
						$("<option value='"+CarWheel[i]+"'>" + CarWheel[i] + "</option>").appendTo(CarWheelSelect);	
					}
					break;
				case "红色":
					var CarWheel = ["红钢","红碳纤维"];
					for(var i = 0;i<CarWheel.length;i++){
						$("<option value='"+CarWheel[i]+"'>" + CarWheel[i] + "</option>").appendTo(CarWheelSelect);	
					}
					break;
				case "黑色":
					var CarWheel = ["黑钢","黑碳纤维"];
					for(var i = 0;i<CarWheel.length;i++){
						$("<option value='"+CarWheel[i]+"'>" + CarWheel[i] + "</option>").appendTo(CarWheelSelect);	
					}
					break;
				case "白色":
					var CarWheel = ["白钢","白碳纤维"];
					for(var i=0;i<CarWheel.length;i++){
						$("<option vaiue='"+CarWheel[i]+"'>" + CarWheel[i] + "</option>").appendTo(CarWheelSelect);	
					}
					break;
			}
			CarWheelSelect.parent().show();
		}
		else
		{
			CarWheelSelect.parent().hide();
		}
	});
});