Javascript 在多个选项卡中使用相同的选择框

我使用jQuery，并且我有多个选项卡，它们看起来几乎不同。有一个selectbox，它在所有选项卡上共享，我基本上希望它在所有不同的选项卡上具有相同的值和选定值，因此如果它在一个选项卡中更改，那么它在另一个选项卡中也会更改

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

---

我希望第一个选择框复制到第二个选项卡上，或者始终与另一个选择框相等。有没有一种干净的方法可以做到这一点（不是在tab.change（）上复制，或者是完全不同的方法？

您是否尝试过使用

.clone

jQuery函数

$(SELECT).clone().append(NEWTAB_HTML);

详细地说

$(function()
{
    $("#tabs").tabs();

    $('#tab-2').click(function()
    {
        var newSelect = $('#tab-1 select').clone().attr('id','new_id_value');
        $(this).append(newSelect);
    });

});

---

我希望它对你有用。代码编写得非常匆忙。很抱歉给您带来不便

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

---

.clone（）添加了一个新元素，实际上我只想在另一个选项卡中查看同一元素。那么，如果您想在此处显示相同的选择，有什么意义呢。？您可以将选择框包装成div，然后根据需要移动其html（选择框）。@aishazafar您能告诉我们如何操作吗。？谢谢您的帮助。看起来这是最好的方式，虽然我有更优雅的想法。

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

$(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("");
   });
});