JQuery Noob .. Нужна небольшая помощь с выбором опций - PullRequest
Новая
       10

JQuery Noob .. Нужна небольшая помощь с выбором опций

0 голосов
/ 30 марта 2011

У меня есть выбор с тремя опциями и тремя абзацами, каждый из которых имеет класс css, соответствующий значению этих трех опций. Мне нужно отобразить только абзац с выбранным классом css и скрыть два других. Вот как я представляю себе работу 

jQuery(document).ready(function() { 
    if(jQuery("#my_select option[value='Option one']:selected")){
        jQuery(".option_two").hide();
        jQuery(".option_three").hide();
        jQuery(".option_one").slideDown();
    }


    else if(jQuery("#my_select option[value='Option two']:selected")){
        jQuery(".option_two").slideDown();
        jQuery(".option_three").hide();
        jQuery(".option_one").hide();
    }

    else if(jQuery("#my_select option[value='Option three']:selected")){
        jQuery(".option_two").hide();
        jQuery(".option_three").slideDown();
        jQuery(".option_one").hide();
    }

});

и HTML 

<select id="my_select" name="my_select">
<option value="Option one" selected="selected">Option one</option>
<option value="Option two">Option two</option>
<option value="Option three">Option three</option>


<p class="option_one">Option one</p>
<p class="option_two">Option two</p>
<p class="option_three">Option three</p>

http://jsfiddle.net/aUeTb/1/

Ответы [ 2 ]

1 голос
/ 30 марта 2011

ОБНОВЛЕНО

Предполагая, что у вас столько же тегов <p>, что и <option>, мы берем индексный номер выбранного <option> и используем eq(), чтобы показать только <p> с тем же индексом, что и <option> , 

$('#my_select').change(function() {
    var x = $(this).find('option:selected').index();
    $('p').hide().eq(x).slideDown();
}).change();

Проверьте рабочий пример на http://jsfiddle.net/aUeTb/19/

0 голосов
/ 30 марта 2011

Вы также можете сохранить отображение от значения к классу в массиве: 

function updateSelection() {
    var opts = [
        ['Option one', '.option_one'],
        ['Option two', '.option_two'],
        ['Option three', '.option_three']
       ];
    var selected = $("#my_select > option:selected").attr('value');
    for (var i=0; i<opts.length; i++) {
        if (opts[i][0] == selected) {
            $(opts[i][1]).slideDown();
        } else {
            $(opts[i][1]).hide();
        }
    }
}

$(function() {
    $("#my_select").change(updateSelection);
    updateSelection();
});
...