Javascript 交换2选择下拉列表

我的网站上有两个下拉列表，一个是“From dropdown”，另一个是“To dropdown”。他们之间有一个按钮

我想在用户单击按钮时交换这些下拉列表的位置。例如“从”变为“到”，而“到”变为“从”，而不会丢失所选值。此外，提交表格时，还应适当更新id和名称

这是我现在的代码结构-

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

但我认为这不是最好的方法。实现这一点的最佳方式是什么。使用JSFIDLE的示例会很有帮助

编辑- 所选选项不应交换。只能交换标签、id和名称。 输出的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>

---

我想这就是你想要的

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

你可以检查结果

编辑：如果是这种情况，那么这是您的代码

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

});
})

---

你可以说

这里的意图是什么？您是否真的试图切换值，以便在按下按钮时“to”下拉列表的值为“From”，反之亦然，或者您实际上只是切换页面上两个元素的位置，这只是一种纯粹的视觉变化？为什么您要更改dropdownlist的位置，最好是交换内容，它看起来像是交换的下拉列表基本上我正在尝试交换'从'和'到'的立场，而且两个下拉列表的id和名称也应该相应地更新，以便提交表单。下拉列表中的选定值应保留在那里。添加浏览器中看到的内容的HTML//jQuery.PHP.Magento.com added这与我所做的相同。选定的选项不应交换。只有“收件人”和“发件人”标签应该交换，受尊重的id和名称应该更新。谢谢，这就是我想要实现的

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

});
})