交換2選擇下拉菜單

Question

我在我的網站上有2個下拉菜單（一個是'從下拉菜單'，另一個是'下拉菜單'）。他們之間有一個按鈕。

我想在用戶單擊按鈕時交換這些下拉列表的位置。像'From'變成'To'並且'To'變成'From'而不會丟失選定的值。還有，id和name應該正確更新以進行表單提交。

這是我的代碼結構，現在 -

<fieldset class="select"> 
    <label><?php __('From'); ?></label> 
    <?php 
    echo $form->select(
     'from', 
     $languages, 
     $selectedLanguageFrom, 
     array(
      'class' => 'language-selector', 
      "empty" => false 
     ), 
     false 
    ); 
    ?> 
</fieldset> 

<fieldset class="into"> 
    <span id="into">&raquo;</span> 
</fieldset> 

<fieldset class="select"> 
    <label><?php __('To'); ?></label> 
    <?php 
    echo $form->select(
     'to', 
     $languages, 
     $selectedLanguageTo, 
     array(
      'class' => 'language-selector', 
      "empty" => false 
     ), 
     false 
    ); 
    ?> 
</fieldset> 

我試着這樣做 -

$(document).ready(function() { 
    $("#arrow").click(function() { 
     var obj1=$("#fieldset2").prev(); 
     var obj2=$("#fieldset2").next(); 
     $("#fieldset2").before(obj2); 
     $("#fieldset2").after(obj1); 
    }); 
}) 

但我認爲這不是最好的方式做到這一點。什麼是最好的方式來實現這一點。 JSFiddle的例子會很有幫助。

編輯 - 選擇的選項不應該交換。只有標籤，標識和名稱應該交換。 HTML代碼的輸出 -

<fieldset class="select"> 
    <label>From</label> 
    <select name="from" class="language-selector" id="SentenceFrom"> 
<option value="und" selected="selected">Any</option> 
<option value="abk">Abkhaz</option> 
<option value="afr">Afrikaans</option> 
<option value="ain">Ainu</option> 
</select></fieldset> 

<fieldset class="into"> 
    <span id="into">&raquo;</span> 
</fieldset> 

<fieldset class="select"> 
    <label>To</label> 
    <select name="to" class="language-selector" id="SentenceTo"> 
<option value="und" selected="selected">Any</option> 
<option value="abk">Abkhaz</option> 
<option value="afr">Afrikaans</option> 
<option value="ain">Ainu</option> 
</select></fieldset> 

Answer 1

我認爲這是你想要的。

$(document).ready(function() { 
var clicks = 0; 
$("#arrow").click(function() { 
    var obj1=$("#fieldset1"); 
    var obj2=$("#fieldset2"); 
    $("#fieldset1").remove(); 
    $("#fieldset2").remove(); 

    if (clicks%2 == 0){    

     $(".into").before(obj2); 
     $(".into").after(obj1); 
    }else{    

     $(".into").before(obj1); 
     $(".into").after(obj2); 
    } 
    clicks++; 
}); 
}) 

您可以檢查結果here

編輯：如果是這樣的話，那麼這是你的代碼

$(document).ready(function() { 

$("#arrow").click(function() { 
    var obj1=$("#fieldset1"); 
    var obj2=$("#fieldset2"); 
    var label1=$("#fieldset1 > label"); 
    var label2=$("#fieldset2 > label"); 
    var id1=$("#fieldset1 select").attr("id"); 
    var id2=$("#fieldset2 select").attr("id"); 
    var name1=$("#fieldset1 select").attr("name"); 
    var name2=$("#fieldset2 select").attr("name"); 
    label1.remove(); 
    label2.remove(); 

    obj1.prepend(label2); 
    obj2.prepend(label1); 
    $("#fieldset1 select").attr("id",id2); 
    $("#fieldset2 select").attr("id",id1); 
    $("#fieldset1 select").attr("name",name2); 
    $("#fieldset2 select").attr("name",name1); 

}); 
}) 

而且你可以wath它here