交换 2 select 个下拉菜单

Question

我的网站上有 2 个下拉菜单（一个是 'From dropdown'，另一个是 'To dropdown'）。它们之间有一个按钮。

我想在用户单击按钮时交换这些下拉菜单的位置。就像 '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 的例子会很有帮助。

编辑 - 所选选项不应交换。只有标签、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>

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

});
})

你可以等待 here

交换 2 select 个下拉菜单

Swap 2 select dropdowns

javascript

jquery

cakephp