Jquery modal + default tab using select

Question

Right now I have a anchor link which upon clicking opens a modal window. Inside modal window I have Two tabs.

When the link is clicked the modal opens and tabs are shown.

Here is the code:

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

And here is the modal window with tabs:

<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>

Here is the JSFiddle : http://jsfiddle.net/3npaykxd/7/

It is working fine. But now I want to change the anchor link to select drop down. So that whenever user changes the option. Modal window opens with the selected option tab open as default.

Like this :

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

So choosing option 1 will open modal window with tab 1 open as default inside it. And similarly choosing tab 2 will open modal with tab 2 open as default inside it.

How do I achieve this?

Ahmar

Answer 1

Thank to this: How do I open a tab from with jQuery UI Tabs from an link outside of the div?

When select box change, tabs also change. Here is jsFiddle: http://jsfiddle.net/3npaykxd/8/

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

I think you can handle fadeIn/fadeOut yourself