选择车颜色后

选择车颜色后。效果展示:

页面初加载时:     
图片 1

选择车颜色后。选择车类型后:     
图片 2

选择车颜色后:    
图片 3

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

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<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></SPAN>

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();
}
});
});

您可能感兴趣的文章:

  • JS动态添加option和删除option(附实例代码)
  • javascript实现的动态添加表单元素input,button等(appendChild)
  • js
    动态添加标签(新增一行,其实很简单,就是几个函数的应用)
  • JS中动态添加事件(绑定事件)的代码
  • JS动态添加Table的TR,TD实现方法
  • Js实现动态添加删除Table行示例
  • js下为表格内部动态添加行的代码
  • javascript动态添加表格数据行(ASP后台数据库保存例子)
  • javascript动态添加、修改、删除对象的属性与方法详解
  • javascript 动态添加表格行
  • javascript
    动态添加事件代码
  • JS动态添加选项案例分析

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图