依赖于jQuery的下拉列表
JavaScript jQuery dependent drop down list
我有这个依赖的下拉框代码,其中您选择第一个选择(主板)和其他的(ram和视频板)将显示取决于第一个选择。
$(function(){
var $cat = $("#motherboard"),
$subcat = $(".subcat");
$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel~='"+_rel+"']").show();
$subcat.prop("disabled",false);
});
});
.subcat option{
display:none;
}
.subcat option.label{
display:block;
}
/* useless template */
div{
margin-bottom:10px;
float:left;
width:100%;
}
label{
float:left;
width:200px;
margin-left:20px
}
p{
padding:5px 20px;
background-color:#f1f1f1;
float:left;
border:solid 1px #ccc;
color:#333;
text-transform:uppercase;
margin: 20px 0 30px;
}
body{
font-family:arial;
font-size:14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Made your PC:</h1>
<div>
<label>Select motherboard: </label><select id="motherboard" name="motherboard">
<option class="label" value>Select Motherboard</option>
<!-- Home Ware -->
<option value="AS1">ASUS RAMPAGE V EXTREME</option>
<option value="AS2">ASUS ATX DDR3 2600 LGA</option>
<option value="GB1">Gigabyte AM3+</option>
<option value="MSI1">MSI ATX DDR3 2600 LGA 1150</option>
</select>
</div>
<p><strong>Only compatible components will show.</strong></p>
<div>
<label>Select RAM: </label> <select disabled="disabled" class="subcat" id="RAM" name="RAM">
<option class="label" value>RAM Memory</option>
<option rel="AS1 AS2 GB1" value="KI1">Kingston Value RAM</option>
<option rel="AS1 AS2 MSI1" value="P5KPL">P5KPL-AM SE</option>
<option rel="MSI1 GB1" value="960GM">960GM-VGS3 FX </option>
</select>
</div>
<div>
<label>Select Video Board: </label> <select disabled="disabled" class="subcat" id="video-card" name="video-card">
<option class="label" value>Video Card</option>
<option rel="MSI1 AS2" value="EVGA8400">EVGA GeForce 8400 GS</option>
<option rel="AS1" value="XFXAMD">XFX AMD Radeon HD 5450</option>
<option rel="MSI1 GB1" value="GTX750Ti">EVGA GeForce GTX 750Ti SC</option>
</select>
</div>
你也可以在这个jsfiddle
上看到它我如何添加另一个选项,比如"处理器",主板将取决于它,然后其他所有东西都取决于主板。
现在是:主板->ram,视频板。如何制作:处理器->主板->ram,视频板。
您可以这样做:
- 为处理器下拉菜单添加一个新的部分
- 添加
rel
属性到主板,这将包含处理器id - 指示主板现在是一个子类别(通过添加
class="subcat"
) - 为主板复制
onchange
代码,但将其应用于处理器并针对主板而不是子类别
代码应该是这样的:
$(function(){
// add a supercategory for the processor
var $supcat = $("#processor"),
$cat = $("#motherboard"),
$subcat = $(".subcat");
// duplicate the code for the processor -> motherboard
$supcat.on("change",function(){
var _rel = $(this).val();
$cat.find("option").attr("style","");
$cat.val("");
if(!_rel) return $cat.prop("disabled",true);
$cat.find("[rel~='"+_rel+"']").show();
$cat.prop("disabled",false);
});
$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel~='"+_rel+"']").show();
$subcat.prop("disabled",false);
});
});
.subcat option{
display:none;
}
.subcat option.label{
display:block;
}
/* useless template */
div{
margin-bottom:10px;
float:left;
width:100%;
}
label{
float:left;
width:200px;
margin-left:20px
}
p{
padding:5px 20px;
background-color:#f1f1f1;
float:left;
border:solid 1px #ccc;
color:#333;
text-transform:uppercase;
margin: 20px 0 30px;
}
body{
font-family:arial;
font-size:14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Made your PC:</h1>
<div>
<label>Processeor: </label><select id="processor" name="processor">
<option class="label" value>Select Processor</option>
<!-- Home Ware -->
<option value="P1">Processor 1</option>
<option value="P2">Processor 2</option>
<option value="P3">Processor 3</option>
<option value="P4">Processor 4</option>
</select>
</div>
<p><strong>Only compatible components will show.</strong></p>
<div>
<label>Select motherboard: </label><select id="motherboard" name="motherboard" class="subcat" disabled="disabled">
<option class="label" value>Select Motherboard</option>
<!-- Home Ware -->
<option rel="P1 P2" value="AS1">ASUS RAMPAGE V EXTREME</option>
<option rel="P2 P3" value="AS2">ASUS ATX DDR3 2600 LGA</option>
<option rel="P1 P3 P4" value="GB1">Gigabyte AM3+</option>
<option rel="P2 P4" value="MSI1">MSI ATX DDR3 2600 LGA 1150</option>
</select>
</div>
<div>
<label>Select RAM: </label> <select disabled="disabled" class="subcat" id="RAM" name="RAM">
<option class="label" value>RAM Memory</option>
<option rel="AS1 AS2 GB1" value="KI1">Kingston Value RAM</option>
<option rel="AS1 AS2 MSI1" value="P5KPL">P5KPL-AM SE</option>
<option rel="MSI1 GB1" value="960GM">960GM-VGS3 FX </option>
</select>
</div>
<div>
<label>Select Video Board: </label> <select disabled="disabled" class="subcat" id="video-card" name="video-card">
<option class="label" value>Video Card</option>
<option rel="MSI1 AS2" value="EVGA8400">EVGA GeForce 8400 GS</option>
<option rel="AS1" value="XFXAMD">XFX AMD Radeon HD 5450</option>
<option rel="MSI1 GB1" value="GTX750Ti">EVGA GeForce GTX 750Ti SC</option>
</select>
</div>
复制适用于处理器($supcat
)和主板($cat
)的代码是丑陋的。另外,为了在将来添加新关卡时更容易维护,将代码移动到一个公共函数中并只传递你想要的对象可能会很有趣。像这样:
function updateSelects(obj1, obj2) {
var _rel = $(obj1).val();
obj2.find("option").attr("style","");
obj2.val("");
if(!_rel) return obj2.prop("disabled",true);
obj2.find("[rel~='"+_rel+"']").show();
obj2.prop("disabled",false);
}
将在onchange
事件中调用
相关文章:
- 如何使用jQuery选择下拉列表的值
- jQuery表单添加不适用于下拉列表
- 禁用jQuery中的下拉列表
- 如何使用jquery从下拉列表(javascript)中选择192.168.3.0进行测试自动化
- Jquery 读取编号组中选择下拉列表的数组
- 如何在 Javascript/jQuery 中获取一些随机下拉列表的选定值
- 使用 jQuery 从下拉列表中获取所选文本
- 通过Jquery根据下拉列表中的选择禁用数字字段
- jQuery下拉列表未显示第一个选项
- jQuery,引导程序下拉列表问题
- 当链接单击-jQuery时,第二层下拉列表将隐藏
- 使用带有jQuery或JavaScript的Play 2框架下拉列表
- 如何使用jquery将所选项目从一个下拉组列表(optgroup)移动到另一个下拉列表(optgroup)
- 如何使用JavaScript/JQuery获取下拉列表的选定值
- 如何处理多选下拉列表 - JQuery.
- 如果未选择第一项,请选择下拉列表 jQuery
- 如何修改代码以将其应用于三个下拉列表?(Jquery)
- 单个列筛选不保存下拉列表 jQuery 的状态
- 默认文本下拉列表jquery
- 将 JavaScript 数组转换为下拉列表 - jQuery