Use the same selectbox in multiple tabs

Question

I use jQuery, and I have multiple tabs, that look mostly different. There is a selectbox that's shared over all tabs and I basically want it to have the same values and selected value over all the different tabs, so if it's changed in one tab then it's also changed in the other tab.

<div id="tabs">
<ul>
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
</ul>
<div id="tab-1">
    Content 1
    <select>
        <option>op1</option>
        <option>op2</option>
    </select>
</div>
<div id="tab-2">
    Content 2
    <select>
        <option>op1</option>
        <option>op2</option>
    </select>
</div>
</div>

And the tabs get selected by

$(document).ready(function(){
    $("#tabs").tabs();
}

I want the first selectbox to be copied on the second tab, or be equal to the other selectbox at all times. Is there a clean way to do this (not copying on tab.change() or something), or maybe a wholly different approach to this?

Answer 1

I hope it works for you. The code is written in very hurry. sorry for inconvenience.

<div id="tabs">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
</ul>
<div id="tab-1">
Content 1
<span id="fcont"><select><option>op1</option><option>op2</option></select></span>
</div>
<div id="tab-2">
Content 2
<span id="scont"></span>
</div>
</div>

And in jQuery

$(function()
{
   var mysel= "";
   $("#tabs").tabs();              
    $('#tab-1').click(function()
   {
     mysel = $("#scont").html();
     if(mysel)
     {
       $("#fcont").html(mysel);
       $("#scont").html("");
     }
   });
   $('#tab-2').click(function()
   {
     mysel = $("#fcont").html();
     $("#scont").html(mysel);
     $("#fcont").html("");
   });
});