我有2个下拉菜单。用户从第一个选择内容，然后根据第一个选择过滤第二个中显示的选项。
我的策略是.hide（）第二个下拉列表中的所有选项，如果它们不相关的话。
我正确编写的函数标识了应隐藏第二个下拉列表中的哪些项目，并将style =“display：none”属性添加到这些选项中。
问题是，从第一个选择内容后，第二个下拉列表中似乎没有任何内容。
这是所有的JS。 HTML应该能够相当容易地推断出来。第二个下拉列表中的项目已使用与第一个选项列表中的选项匹配的类名进行标记。
$(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();
})
});
感谢我所有的朋友。
链接到我在JsFiddle上的工作 - ＆gt; http://jsfiddle.net/hwD8K/
答案 0 :(得分：1)
很遗憾，您无法使用CSS来影响option中select的显示。
最好的办法是将值存储在select的数据字段中，然后在每次更改时过滤该数据字段，并每次重新设置select的内容。 / p>
或者，您可以从DOM中分离出不需要的option，而不是show（）和hide（），以后再重新附加它们。
有关此问题的更多想法，请参阅此问题：
How can I hide select options with JavaScript? (Cross browser)
答案 1 :(得分：0)
在这里，我从您的代码中创建示例页面。
<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>
工作正常。 请检查一下。