2012-01-31 70 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