2012-01-31 3 views
0

두 개의 드롭 다운 메뉴가 있습니다. 사용자가 첫 번째 항목에서 항목을 선택하면 두 번째 항목에 표시된 옵션이 첫 번째 항목을 기준으로 필터링됩니다.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(); 
    }) 
}); 

내 모든 친구들에게 감사드립니다. JsFiddle에 대한 조치에 내 작품에

링크 ->http://jsfiddle.net/hwD8K/

답변

1

불행하게도, 당신은 selectoption의 표시에 영향을 미치는 CSS를 사용할 수 없습니다.

데이터 필드에 값을 select에 저장하고 모든 변경시 해당 데이터 필드를 필터링하고 매번 select의 내용을 다시 설정하는 것이 가장 좋습니다.

또는 show() 및 hide() 대신 바람직하지 않은 option을 DOM에서 분리하여 나중에 다시 부착 할 수 있습니다. 여기

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

+0

잘 연주 한 선생님. 고맙습니다. 작년에 CUSEC에서 만나 뵈어 봤어? – Bnjmn

+0

아니요. 나는 원한다. :) 이전에는 어떤 프로그래밍 컨퍼런스에도 없었습니다. 나는 이것이 도움이 된 것을 기쁘게 생각한다! –

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