Javascript 使用JQuery筛选下拉菜单
我有两个下拉菜单。用户从第一个选项中选择一些内容，然后根据第一个选择过滤第二个选项中显示的选项 我的策略是在第二个下拉列表中隐藏所有不相关的选项 我编写的函数正确地标识了第二个下拉列表中应该隐藏的项目，并将style=“display:none”属性添加到这些选项中 问题是，从第一个下拉列表中选择某个内容后，第二个下拉列表中似乎没有任何内容 这里是所有的JS。HTML应该能够相当容易地推断出来。第二个下拉列表中的项目已使用与第一个选项列表中的选项匹配的类名进行标记Javascript 使用JQuery筛选下拉菜单,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有两个下拉菜单。用户从第一个选项中选择一些内容，然后根据第一个选择过滤第二个选项中显示的选项 我的策略是在第二个下拉列表中隐藏所有不相关的选项 我编写的函数正确地标识了第二个下拉列表中应该隐藏的项目，并将style=“display:none”属性添加到这些选项中 问题是，从第一个下拉列表中选择某个内容后，第二个下拉列表中似乎没有任何内容 这里是所有的JS。HTML应该能够相当容易地推断出来。第二个下拉列表中的项目已使用与第一个选项列表中的选项匹配的类名进行标记 $(document).rea
$(document).ready(function () {
$('.part-type').change(function () {
$(this).show();
var part_type = "."+$(".part-type option:selected").text().toLowerCase();
$('.part').children().filter(":not("+part_type+")").hide();
})
});
链接到我在JSFIDLE-->上的实际工作不幸的是，您不能使用CSS影响
选择中选项的显示
您最好将值存储在选择
上的数据字段中，然后在每次更改时过滤该数据字段，并每次重新设置选择
的内容
或者，您可以从DOM中分离不需要的选项
s，而不是show（）和hide（），然后重新连接它们
有关这方面的更多想法，请参见以下问题：
这里我根据您的代码创建示例页面
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.part-type').change(function () {
$(this).show();
var part_type = $(".part-type option:selected").text().toLowerCase();
$('.part').children().filter(function (index) {
if ($(this).attr("class").toString() != part_type)
return $(this).hide();
else
return $(this).show();
})
})
});
</script>
</head>
<body>
Part Type
<select class="part-type">
<option>Body-Parts-Sheet-Metal</option>
<option>Body-Parts-Other</option>
<option>Exhaust</option>
<option>Interior</option>
<option>Engine-Parts</option>
<option>Suspension-And-Steering</option>
<option>Electrical-Lenses</option>
<option>Electrical-Switches</option>
<option>Fuel</option>
<option>Gauges</option>
<option>Brakes</option>
<option>Wiper-System</option>
<option>Glass</option>
<option>Wheels</option>
<option>Miscellaneous</option>
</select>
Part
<select class="part">
<option class="body-parts-sheet-metal" value="front-hoods">front-hoods</option>
<option class="body-parts-sheet-metal" value="engine-lids-rear">engine-lids-rear</option>
<option class="body-parts-sheet-metal" value="trunk-lids">trunk-lids</option>
<option class="body-parts-sheet-metal" value="doors">doors</option>
<option class="body-parts-sheet-metal" value="fenders">fenders</option>
<option class="body-parts-sheet-metal" value="roofs-sunroofs">roofs-sunroofs</option>
<option class="body-parts-sheet-metal" value="sliding-doors">sliding-doors</option>
<option class="body-parts-sheet-metal" value="rear-hatches">rear-hatches</option>
<option class="body-parts-sheet-metal" value="front-aprons">front-aprons</option>
<option class="body-parts-sheet-metal" value="rear-aprons">rear-aprons</option>
<option class="body-parts-sheet-metal" value="body-cuts">body-cuts</option>
<option class="engine-parts" value="cylinder-heads">cylinder-heads</option>
<option class="engine-parts" value="flywheels">flywheels</option>
<option class="engine-parts" value="flex-plates">flex-plates</option>
<option class="engine-parts" value="intake-manifolds">intake-manifolds</option>
<option class="engine-parts" value="carburators">carburators</option>
<option class="engine-parts" value="air-cleaners">air-cleaners</option>
<option class="engine-parts" value="engine-tins">engine-tins</option>
<option class="engine-parts" value="alternators-generators">alternators-generators</option>
<option class="engine-parts" value="voltage-regulators">voltage-regulators</option>
<option class="engine-parts" value="oil-coolers">oil-coolers</option>
<option class="engine-parts" value="egr-valves">egr-valves</option>
<option class="engine-parts" value="distributors">distributors</option>
<option class="engine-parts" value="charcoal-canisters">charcoal-canisters</option>
<option class="engine-parts" value="cooling-fans">cooling-fans</option>
<option class="engine-parts" value="throttle-bodies">throttle-bodies</option>
<option class="engine-parts" value="fuel-injection">fuel-injection</option>
<option class="engine-parts" value="radiators">radiators</option>
<option class="engine-parts" value="air-conditioning">air-conditioning</option>
<option class="engine-parts" value="pulleys-brackets-mounts">pulleys-brackets-mounts</option>
<option class="engine-parts" value="oil-pans">oil-pans</option>
<option class="engine-parts" value="fan-motors">fan-motors</option>
<option class="engine-parts" value="clutch-parts">clutch-parts</option>
<option class="fuel" value="gas-tanks">gas-tanks</option>
<option class="fuel" value="sending-units">sending-units</option>
<option class="fuel" value="fuel-pumps">fuel-pumps</option>
<option class="fuel" value="accumulators">accumulators</option>
<option class="fuel" value="fuel-caps">fuel-caps</option>
<option class="fuel" value="filler-necks">filler-necks</option>
<option class="glass" value="door-glass">door-glass</option>
<option class="glass" value="wing-windows">wing-windows</option>
<option class="glass" value="side-vent-windows">side-vent-windows</option>
<option class="glass" value="windshields">windshields</option>
<option class="glass" value="rear-glass">rear-glass</option>
<option class="glass" value="rear-side-glass">rear-side-glass</option>
<option class="glass" value="louvered-windows">louvered-windows</option>
<option class="glass" value="rear-quarter-glass">rear-quarter-glass</option>
<option class="glass" value="other-glass">other-glass</option>
<option class="bumpers" value="bumpers">bumpers</option>
<option class="bumpers" value="headlight-rings">headlight-rings</option>
<option class="bumpers" value="hinge-assemblies">hinge-assemblies</option>
<option class="bumpers" value="window-regulators">window-regulators</option>
<option class="bumpers" value="door-parts">door-parts</option>
<option class="bumpers" value="front-grills">front-grills</option>
<option class="bumpers" value="door-mirrors">door-mirrors</option>
<option class="suspension-and-steering" value="front-beams">front-beams</option>
<option class="suspension-and-steering" value="steering-boxes">steering-boxes</option>
<option class="suspension-and-steering" value="spindles">spindles</option>
<option class="suspension-and-steering" value="bulkheads">bulkheads</option>
<option class="suspension-and-steering" value="subframes">subframes</option>
<option class="suspension-and-steering" value="front-leaf-springs">front-leaf-springs</option>
<option class="suspension-and-steering" value="front-control-arms">front-control-arms</option>
<option class="suspension-and-steering" value="rear-trailing-arms">rear-trailing-arms</option>
<option class="suspension-and-steering" value="rear-stub-axles">rear-stub-axles</option>
<option class="suspension-and-steering" value="rear-axle-tubes">rear-axle-tubes</option>
<option class="suspension-and-steering" value="rear-axles">rear-axles</option>
<option class="suspension-and-steering" value="cv-axles">cv-axles</option>
<option class="suspension-and-steering" value="hubs">hubs</option>
<option class="suspension-and-steering" value="front-struts">front-struts</option>
<option class="suspension-and-steering" value="rear-struts">rear-struts</option>
<option class="suspension-and-steering" value="rack-pinons">rack & pinions</option>
<option class="suspension-and-steering" value="power-steering">power-steering</option>
<option class="gauges" value="speedometers">speedometers</option>
<option class="gauges" value="clocks">clocks</option>
<option class="gauges" value="fuel-gauges">fuel-gauges</option>
<option class="gauges" value="temperature-gauges">temperature-gauges</option>
<option class="gauges" value="other-gauges">other-gauges</option>
<option class="wheels" value="rims">rims</option>
<option class="wheels" value="hub-caps">hub-caps</option>
<option class="wheels" value="jacks">jacks</option>
<option class="wheels" value="tires">tires</option>
<option class="exhaust" value="mufflers">mufflers</option>
<option class="exhaust" value="heater-boxes">heater-boxes</option>
<option class="exhaust" value="exhaust-manifolds">exhaust-manifolds</option>
<option class="exhaust" value="heat-transfer-tubes">heat-transfer-tubes</option>
<option class="exhaust" value="egr-filters">egr-filters</option>
<option class="exhaust" value="parallel-pipes">parallel-pipes</option>
<option class="exhaust" value="crossover-pipes">crossover-pipes</option>
<option class="exhaust" value="tail-pipes">tail-pipes</option>
<option class="exhaust" value="other-exhaust-items">other-exhaust-items</option>
<option class="electrical-lenses" value="front-headlights">front-headlights</option>
<option class="electrical-lenses" value="front-turn-signals">front-turn-signals</option>
<option class="electrical-lenses" value="rear-tail-lights">rear-tail-lights</option>
<option class="electrical-lenses" value="side-markers">side-markers</option>
<option class="electrical-lenses" value="reverse-lights">reverse-lights</option>
<option class="electrical-lenses" value="fog-lights">fog-lights</option>
<option class="wiper-system" value="wiper-motors">wiper-motors</option>
<option class="wiper-system" value="wiper-arms">wiper-arms</option>
<option class="wiper-system" value="wiper-transmissions">wiper-transmissions</option>
<option class="wiper-system" value="hardware">hardware</option>
<option class="miscellaneous" value="transmission-computers">transmission-computers</option>
<option class="interior" value="seats">seats</option>
<option class="interior" value="mirrors">mirrors</option>
<option class="interior" value="steering-wheels">steering-wheels</option>
<option class="interior" value="steering-columns">steering-columns</option>
<option class="interior" value="radios">radios</option>
<option class="interior" value="glove-boxes">glove-boxes</option>
<option class="interior" value="seat-belts">seat-belts</option>
<option class="interior" value="ashtrays">ashtrays</option>
<option class="interior" value="speaker-grills">speaker-grills</option>
<option class="interior" value="control-levers">control-levers</option>
<option class="interior" value="sunvisors">sunvisors</option>
<option class="interior" value="dashes">dashes</option>
<option class="interior" value="air-bags">air-bags</option>
<option class="interior" value="control-modules">control-modules</option>
<option class="interior" value="pedal-assemblies">pedal-assemblies</option>
<option class="electrical-switches" value="turn-signal-switches">turn-signal-switches</option>
<option class="electrical-switches" value="wiper-switches">wiper-switches</option>
<option class="electrical-switches" value="headlight-switches">headlight-switches</option>
<option class="electrical-switches" value="ignition-switches">ignition-switches</option>
<option class="electrical-switches" value="hazard-switches">hazard-switches</option>
<option class="electrical-switches" value="relays">relays</option>
<option class="electrical-switches" value="fuseboxes">fuseboxes</option>
<option class="electrical-switches" value="window-switches">window-switches</option>
<option class="electrical-switches" value="fan-switches">fan-switches</option>
<option class="electrical-switches" value="trunk-gas-flaps">trunk-gas-flaps</option>
<option class="electrical-switches" value="horns">horns</option>
<option class="brakes" value="brake-drums">brake-drums</option>
<option class="brakes" value="backing-plates">backing-plates</option>
<option class="brakes" value="abs-control-units">abs-control-units</option>
<option class="brakes" value="brake-boosters">brake-boosters</option>
<option class="brakes" value="brake-rotors">brake-rotors</option>
<option class="brakes" value="proportioning-valves">proportioning-valves</option>
<option class="brakes" value="emergency-brakes">emergency-brakes</option>
<option class="brakes" value="brake-calipers">brake-calipers</option>
<option class="brakes" value="abs-pumps">abs-pumps</option>
</select>
</body>
</html>
$（文档）.ready（函数（）{
$（'.part type'）.change（函数（）{
$（this.show（）；
var part_type=$（“.part type选项：选中”）.text（）.toLowerCase（）；
$（'.part'）.children（）.filter（函数（索引）{
if（$（this.attr（“class”）.toString（）！=零件类型）
返回$（this.hide（）；
其他的
返回$（this.show（）；
})
})
});
零件类型
车身钣金件
身体部位其他
耗尽
内部
发动机零件
悬架和转向系统
电透镜
电气开关
燃料
仪表
制动器
雨刷系统
玻璃
车轮
混杂的
部分
前罩
发动机后盖
行李箱盖
门
挡泥板
屋顶天窗
滑动门
后舱口
前围裙
后裙板
身体切割
气缸盖
飞轮
挠性板
进气歧管
汽化器
空气滤清器
发动机罐
交流发电机
电压调节器
油冷却器
废气再循环阀
分销商
炭罐
冷却风扇
节气门体
燃油喷射
散热器
空调
滑轮支架
油盘
风扇电机
离合器零件
煤气罐
发送单位
燃油泵
蓄能器
燃料帽
加油口颈
门玻璃
翼窗
侧通风窗
挡风玻璃
后玻璃
后侧玻璃
百叶窗
后角窗
其他玻璃
保险杠
前照灯环
铰链组件
玻璃升降器
门部件
前格栅
门镜
前梁
转向箱
纺锤
舱壁
子帧
前钢板弹簧
前控制臂
后拖臂
后短轴
后轴管
后轴
等速轴
枢纽
前支柱
后支柱
机架和小齿轮
动力转向
车速表
时钟
燃油表
温度计
其他仪表
轮辋
轮毂盖
千斤顶
轮胎
消音器
加热箱
排气歧管
传热管
废气再循环过滤器
平行管
交叉管
尾管
其他排气项目
前大灯
前转向灯
后尾灯
侧标志
倒车灯
雾灯
刮水器电机
刮臂
刮水器变速器
硬件
传输计算机
座位
镜子
方向盘
转向柱
收音机
手套箱
安全带
烟灰缸
扬声器格栅
操纵杆
向日葵
破折号
安全气囊
控制模块
踏板总成
转向信号开关
刮水器开关
前照灯开关
点火开关
危险开关
接力
熔丝盒
车窗开关
风扇开关
主干气襟翼
角
制动鼓
垫板
abs控制单元
制动助力器
制动盘
比例阀
紧急刹车
制动卡钳
abs泵
它很好用。
请检查。打得好，先生。非常感谢。顺便说一句，我去年在CUSEC见过你吗？没有，先生。我希望……）以前从未参加过任何编程会议。我很高兴这有帮助！