2012-01-31 66 views
0

我有2个下拉菜单。用户从第一个选择中选择一些,然后基于第一个选择过滤在第二个中显示的选项。使用JQuery过滤掉的下拉菜单

我的策略是在第二个下拉菜单中隐藏()所有选项,如果它们不相关。

我写的函数可以正确识别第二个下拉列表中的哪些项目应该隐藏,并将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(); 
    }) 
}); 

感谢所有我在SO上的朋友。

链接到我在的jsfiddle行动工作 - >http://jsfiddle.net/hwD8K/

回答

1

不幸的是,你不能使用CSS来影响option S上显示的select

最好的办法是将值存储在select的数据字段中,然后在每次更改时过滤该数据字段并每次重新设置select的内容。或者,您可以不使用show()和hide(),而是从DOM中分离出不期望的option,并在稍后重新附加它们。

有关此更多的想法,看到了这个问题:

How can I hide select options with JavaScript? (Cross browser)

+0

很好玩先生。谢谢。我去年在CUSEC看到你了吗? – Bnjmn 2012-01-31 06:09:36

+0

不,先生。我希望。 :)之前从未参加过任何编程会议。我很高兴这有助于! – 2012-01-31 15:14:10

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> 

它工作正常。 请检查它。

+0

这可以在Chrome中使用,但不能在IE中使用 – ShaneA 2015-12-22 22:34:58