jQueryでselect要素からselect要素へ値を移す

Read More

どういうことか参考画像を見てもらったほうが分かりよい。


左のリストで選択したものだけ右のリストに移したい。



選択したものを右へ移した状態。



もちろんこの逆で右のリストのものを左にも移せるようにしたい。


ということで前提条件。


左のリストのIDをid_toとし、
右のリストのIDをid_exceptとする。

除外ボタンはid_btn_exceptとし、
戻すボタンはid_btn_toとする。


■jQueryでselect要素の中身を移す例
<script type="text/javascript">
<!--
$('#id_btn_except').click(function() {
  $('#id_except').append($('#id_to option:selected'));
  $('#id_except option:selected').removeAttr('selected');
});

$('#id_btn_to').click(function() {
  $('#id_to').append($('#id_except option:selected'));
  $('#id_to option:selected').removeAttr('selected');
});
//-->
</script>



これで画像のような挙動になる、はず。



あと、submitする前に選択状態にしておかないと次ページで値を受け取れないのでform要素のidをid_formとでもしておいて、
$('#id_form').submit(function() {
  $('#id_to option').attr('selected', 'selected');
  return true;
});

とすると上手に値を受け取れるはず。


submit直前のselect要素






これ実装が必要になったときいつも忘れてしまっててその度に調べてる気がするのでメモしておく。