Question

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

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

选项卡由

选中

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

我希望第一个选择框在第二个选项卡上复制，或者始终等于另一个选择框。有没有一个干净的方法来做到这一点（不是复制tab.change（）或其他东西），或者可能是一个完全不同的方法吗？

Answer 1

我希望它适合你。代码写得非常匆忙。很抱歉给您带来不便。

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

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

Answer 2

您是否尝试过使用.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);
    });

});

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

2 个答案: