1

JavaScript または JQuery を使用して、あるドロップダウン リストから別のドロップダウン リストにオプションを移動する簡単な方法を開発しようとしています。ただし、インターネットで見つけたすべての例は本当に古いか、単純に機能しません (私自身の知識は少し限られています)。

ドロップダウンリスト間でオプションを移動する簡単な方法を開発するのを手伝ってくれる人はいますか?

私が持っているHTMLは次のとおりです。

<select name="sourceSelect" id="sourceSelect" size="3"  onclick="">
  <option value="example1">Example1</option>
  <option value="example2">Example2</option>
  <option value="example3">Example3</option>
</select>


<input type="submit" name="forward" id="forward" value="Forward" onclick=""/>

<input type="submit" name="back" id="back" value="Back" onclick=""/>


<select name="destinationSelect" id="destinationSelect" multiple="multiple" size="3" onclick="">
  <!--EMPTY DROP-DOWN LIST-->
</select>

配列が使用されている場合、ドロップダウン リストの名前を sourceSelect[] に変更する必要があると思いますか? また、空のonclickを追加しましたが、そのようにする必要があるかどうかわかりませんか?

4

4 に答える 4

4

jQueryを使用する実用的なソリューションは次のとおりです。

function cutAndPaste(from, to) {
    $(to).append(function() {
        return $(from + " option:selected").each(function() {
            this.outerHTML;
        }).remove();
    });
}

$("#forward").off("click").on("click", function() {
    cutAndPaste("#sourceSelect", "#destinationSelect");
});

$("#backward").off("click").on("click", function() {
    cutAndPaste("#destinationSelect", "#sourceSelect");
});
于 2012-10-01T11:37:14.917 に答える
2

jQuery を使用すると、最も単純な転送ボタンのコードは次のようになります。

$('#forward').on('click',function(){

    var $selected = $('option:selected','#sourceSelect');
    $selected.each(function(i,e){
        $('#destinationSelect').append(
            $('<option />').val(e.value).html(e.innerHTML)
        );
    });
    $selected.remove();
});

そしてあなたの戻るボタン：

$('#back').on('click',function(){

    var $selected = $('option:selected','#destinationSelect');
    $selected.each(function(i,e){
        $('#sourceSelect').append(
            $('<option />').val(e.value).html(e.innerHTML)
        );
    });
    $selected.remove();
});

実際の例: http://jsfiddle.net/y6B8Q/

その後、必要に応じて独自の jquery プラグインを作成して、これを好きなだけ使用できます。

于 2012-10-01T11:32:41.890 に答える
0

Javascript解決策は、選択のオプションを繰り返し処理し、以下のようsourceに追加することですdestination

    for (i=0;i<sourceSelect.length;i++)
    {
      var newOption = document.createElement('<option value="'+sourceSelect.options[i].text+'">');
      destinationSelect.options.add(newOption);
    }

また、ソースを選択したい場合はclear、次を追加します

sourceSelect.innerHTML = ''
于 2012-10-01T11:47:05.747 に答える
0 
var content_option = $('#sourceSelect option[value="example1"]').contents();
$('#sourceSelect option[value="example1"]').remove();
$('#destinationSelect').append('<option value="example1">'+content_option+'</option>');
于 2012-10-01T11:42:19.800 に答える