2012-01-31 4 views
0

У меня есть два раскрывающихся меню. Пользователь выбирает что-то из первого, затем параметры, отображаемые во второй, фильтруются на основе первого выбора.Отфильтрованное раскрывающееся меню с JQuery

Моя стратегия состоит в .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(); 
    }) 
}); 

Спасибо всем моим друзьям на SO.

Ссылка на мою работу в действии на JsFiddle ->http://jsfiddle.net/hwD8K/

ответ

1

К сожалению, вы не можете использовать CSS, чтобы влиять на отображение option с в select.

Ваш лучший выбор - это, вероятно, сохранить значения в поле данных на select, а затем фильтровать это поле данных при каждом изменении и повторно устанавливать содержимое select каждый раз.

Или вместо show() и hide() вы могли бы отсоединить нежелательные option s от 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

Смежные вопросы