JQuery UI - Как вы делаете несколько переключений из списка?

Question

У меня есть список в форме, и на основе ответов внутри я хочу открыть другой переключатель, используя эффект переключения пользовательского интерфейса JQuery: http://jqueryui.com/demos/toggle/. Код отображается под «Просмотр источника» .

Часть 1 : код в текущей форме не поддерживает несколько переключателей на одной странице. Как я могу переписать javascript и идентифицировать div по-разному, чтобы несколько переключателей отвечали на несколько ссылок?

Часть 2 : как я могу взять список (как показано ниже) и получить три варианта для выбора из двух переключенных div?

<select class="toggle inputBox listBox" id="select" name="customer[option]"> 
  <option>Choose Your Option</option> 
  <option value="1" rel="toggle[one]"> Option 1</option>
  <option value="2" rel="toggle[one]"> Option 2</option>
  <option value="3" rel="toggle[two]"> Option 3</option>
</select>

Answer 1

Я не уверен на 100% в вашем вопросе, но если вам просто нужна другая анимация, основанная на выбранной опции, вы можете сделать что-то вроде этого

HTML

<div>Hey, what?</div>
<select>
    <option>-</option>
    <option>1</option>
    <option>2</option>
</select>​​​​​​​​​​​​​​​​​​​

JQuery

$('select').change(function() {
    switch (this.selectedIndex) {
    case 0:
        break;
    case 1:
        $('div').fadeOut(300, function() {
            $(this).show();
        });
        break;
    case 2:
        $('div').slideUp(300, function() {
            $(this).show();
        });
        break;
    }
});​

Fiddle

http://jsfiddle.net/HJYYj/

Редактировать

Просто прочитайте ваш вопрос и поняли, что вы хотите скрыть разные элементы с каждой опцией. Вы можете довольно легко изменить вышеуказанный jQuery.

Обновленный пример: http://jsfiddle.net/yrNjS/

Обновленный код

$('select').change(function() {
    switch (this.selectedIndex) {
    case 0:
        break;
    case 1:
        $('span').slideUp(500, function() {
            $(this).show();
        });
        break;
    case 2:
        $('div').slideUp(500, function() {
            $(this).show();
        });
        break;
    }
});​

Answer 2

1: при использовании атрибута HTML id вы должны гарантировать, что ни один другой элемент HTML на странице не имеет такого идентификатора.Вы можете использовать разные id для каждого переключателя:

$('#id1').toggle(...);
$('#id2').toggle(...);
$('#id3').toggle(...);

... или использовать селектор class, чтобы применить один и тот же эффект переключения ко всем 3:

$('div.toggle').toggle(...); //set all 3 to the same state

2: Привязать прослушиватель событий к элементу управления select.Когда выбор изменяется, вы можете изменить состояние переключателей, снова вызвав toggle() (посмотрите, как реализован runEffect() в примере).В нескольких руководствах по jQuery есть хорошие объяснения того, как связывать события:

http://docs.jquery.com/Tutorials