1

2 つの単純な選択リストがあり、それらの値を交換するオプションを追加したいと考えています。したがって、たとえば値「ONE」を持つ最初のリストがあり、他のリストには値「TWO」があります。「スワップ」ボタンをクリックすると、最初のボタンの値は「TWO」、2 番目のボタンの値は「ONE」になります。

ここに jsFiddle があります: http://jsfiddle.net/YPyRF

HTMLコードは次のとおりです。

<div class="form-item-from">
  <label for="form-item-from">From </label>
 <select class="form-select" id="form-item-from"><option value="ONE">ONE</option></select>
</div>

<div class="form-item-to">
  <label for="form-item-to">From </label>
 <select class="form-select" id="form-item-to"><option value="TWO">TWO</option></select>
</div>

<a href="">Swap values</a>

ここに js コードがあります ( Is there a native jQuery function to switch elements? から):

jQuery("#form-item-from").after(jQuery("#form-item-to"));

ただし、これはこの場合は機能しません。さらに、関数は選択リストまたはスワップ ボタンの位置に依存するべきではありません (スワップ ボタンが 2 つのリストの間になければならない解決策が 1 つ見つかりました)。

4

3 に答える 3

5

このようなものが動作します：

$("#SwapButton").click(function(e) {
    e.preventDefault();//This prevents the A tag from causing a page reload

    //Get the values
    var fromVal = $("#form-item-from option:selected").val();
    var fromText = $("#form-item-from option:selected").text();
    var toVal = $("#form-item-to option:selected").val();
    var toText = $("#form-item-to option:selected").text();

    //Set the values
    $("#form-item-from option:selected").val(toVal);
    $("#form-item-from option:selected").text(toText);
    $("#form-item-to option:selected").val(fromVal);
    $("#form-item-to option:selected").text(fromText);
});​

これが更新されたフィドルです

注: これは、option選択されている項目のみを切り替えます。これがあなたが望むものではない場合、私は誤解しており、Adam のソリューションを使用する方が良いかもしれません。選択した値のみを交換するという事実を示すより良い例を次に示します。

于 2012-10-22T09:53:52.370 に答える
2

次のようなものを試してください：jsfiddle

リンクをクリックすると...
1) #form-item-from の
すべてのオプションを変数に保存する 2) #from-item-to のすべてのオプションを変数に保存する
3) #from を from のオプションで更新する#to
4) #to をオプション from #from で更新

$(function() {
    $("a").click(function() {
        var selectOne = $("#form-item-from").html();
        var selectTwo = $("#form-item-to").html();

        $("#form-item-from").html(selectTwo);
        $("#form-item-to").html(selectOne);
        // stops the link going anywhere
        return false;
    });
});
于 2012-10-22T09:53:42.027 に答える
2

これを試して、

$("a").click(function(e){
    e.preventDefault();        
    var a = jQuery("#form-item-from").html();
    var b = jQuery("#form-item-to").html();
    jQuery("#form-item-from").html(b);
    jQuery("#form-item-to").html(a);
})​

デモ: http://jsfiddle.net/jQACe/3/

于 2012-10-22T09:58:11.123 に答える