JQuery модальный + вкладка по умолчанию с помощью выбора

Question

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

При щелчке по ссылке открывается мода и отображаются вкладки.

Вот код:

<a href="#" data-reveal-id="myModal" data-animation="fade" >Weekly Schedule</a> 

А вот модальное окно с закладками:

<div id="myModal" class="reveal-modal"> 
<a class="close-reveal-modal">&#215;</a> 

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Schedule 1</a></li> 
    <li><a href="#tabs-2">Schedule 2</a></li> 

    </ul> 
    <div id="tabs-1"> 
Schedule 1 content 
</div> 

<div id="tabs-2"> 
Schedule 1 content 
</div> 

</div> 
</div> 

Вот JSFiddle: http://jsfiddle.net/3npaykxd/7/

Это работает отлично. Но теперь я хочу изменить привязку, чтобы выбрать drop down. Так что всякий раз, когда пользователь меняет этот параметр. Модальное окно открывается с выбранной вкладкой выбранного параметра по умолчанию.

Как это:

<select name="schedule"> 
<option value="">Please Select schedule </option> 
<option value="0">Schedule 1 </option> 
<option value="1">Schedule 2</option> 
</select> 

Так выбрать вариант 1 будет открыть модальное окно с вкладкой 1 открытой по умолчанию внутри него. И аналогично, выбор tab 2 откроет модальный с открытой вкладкой 2 в нем.

Как это достичь?

Ахмар

Answer 1

Спасибо этому: How do I open a tab from with jQuery UI Tabs from an link outside of the div?

При выборе изменения окна, вкладки также изменяются. Вот jsFiddle: http://jsfiddle.net/3npaykxd/8/

$('#schedule').on('change',function(e){ 
    console.log($(this).val()); 
    $("#tabs").tabs("select",$(this).val()); 
}) 

Я думаю, что вы можете справиться с FadeIn/FADEOUT себе