Question

我的网站上有2个下拉菜单（一个是'从下拉列表中，另一个是'下拉菜单'）。它们之间有一个按钮。

我想在用户点击按钮时交换这些下拉列表的位置。就像'From'变为'To'而'To'变为'From'而不会丢失所选值。并且还应该正确更新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>

我试过这个 -

$(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个选择下拉列表

1 个答案: