二つのセレクトボックス間でのデータ移動

解決済

質問者：hunter_999
質問日時：2009/09/08 00:13
回答数：4件

二つのセレクトボックス間でのデータのやり取りを行おうと思うのですが、
左右にセレクトボックスを設置して右から左、左から右といった感じで作成しようと思います。
そこでデータの受け渡しでセレクトボックスの上から値を追加していくことは可能なのでしょうか？
それともし可能なのであれば具体的な方法を教えていただければとおもいます。
どうぞよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： fujillin
回答日時：2009/09/08 21:57

#2です。

すでにあるコードを修正したいのなら、最初にそれを提示すべき。
機能のみで質問すれば、返ってくる回答は人それぞれ少しずつ違う。ましてや、仕様が曖昧な質問なら、回答は千差万別で当然。

さて、ご提示のコードをどうしたいのかが、まだ不明ですね。
1）「→←」を押した時にボックス内で項目が移動するようにするのか
　（#2,#3はそのように解釈している）、あるいは現状のままでよいのか。
2）今のものはそのままで、項目を追加した時に下に追加されているのを
　前に追加するように修正しさえすればよいのか。
　（#1,#2,#3ともご質問文の通り、先頭に追加するようにしている）

2）だけで良いのなら、現状の
　ops[ops.length] = new Option(mop.text, mop.value);
の部分が明示的に最後に追加していますので、その部分を修正すれば宜しいかと。

＞皆様の回答大変参考になりました。
では、参考にして、活用しましょう。
#1～#3、それぞれ少しずつ違う考え方や指定方法で要素を追加していますが、実際に、その部分で利用しているメソッドはみな同じです。
利用しやすい考え方を流用するのがよろしいかと思います。

＞具体的な方法を教えていただければ～
↑のメソッドが具体的な方法に当たると言えるでしょう。insertBefore（）

-------------------------------------------
＜おまけ＞
・form要素の取得にHTML内の順番を使っていますが、この方法だとHTMLを修正するとスクリプトの修正が必要になる場合があります。（formの順を入れ替えたり、追加したりした場合した場合）
idを振るなどして、ダイレクトに取得するのがよろしいかと。
(　getElementById('id')　）

・質問には関係ありませんが、前半のイベント設定部分（IE専用となっている部分）を一般化させたいのなら、#3様の回答に設定のヒントがあります。
参考になさってください。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうござます。
大変参考になりました。
そしてようやく問題解決にいたりました。
助言の方いろいろありがとうございました。

通報する

お礼日時：2009/09/09 13:19

No.3

回答者： yuu_x
回答日時：2009/09/08 11:09

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
　<title>XXXX</title>
</head>
<style type="text/css">
.xxx SELECT {
　display : inline-block;
　vertical-align : top;
　width : 8em;
}

.xxx SPAN {
　display : inline-block;
　width : 2em;
　padding : 1em 0.5em;
}
</style>
<script type="text/javascript">
//@cc_on
( function ( ) {

document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', function( evt ) {
　var target = evt./*@if(1) srcElement @else@*/ target /*@end@*/;
　var form = target.form;
　
　switch( target.name ) {
　　case 'TO_RIGHT' : moveItem( form, 'RIGHT_BOX', 'LEFT_BOX' ); break;
　　case 'TO_LEFT'　: moveItem( form, 'LEFT_BOX', 'RIGHT_BOX' ); break;
　　default :
　}
}, false );

function moveItem ( form, to_name, from_name ) {
　var to = form.elements[ to_name ];
　var items = form.elements[ from_name ].options;
　
　for( var i = items.length - 1; i > -1; i -- ) {
　　items[ i ].selected && to.insertBefore( items[ i ], to.firstChild );
　}
}

} ) ( );
</script>
<body>
<form action="#" class="xxx">
　<fieldset>
　　
　　
　　<select name="LEFT_BOX" size="5" multiple>
　　　<option value="item1">item1</option>
　　　<option value="item2">item2</option>
　　　<option value="item3">item3</option>
　　　<option value="item4">item4</option>
　　　<option value="item5">item5</option>
　　</select>
　　
　　<span>
　　　<input type="button" name="TO_RIGHT" value=">>">
　　　<input type="button" name="TO_LEFT" value="<<">
　　</span>
　　
　　<select name="RIGHT_BOX" size="5" multiple>
　　</select>
　</fieldset>
</form>
</body>
</html>

# 超適当ですが、こういうことですか？
# 全角でインデントが入れてあるので、適当な文字に変換してください。
## うぉ、かぶった。まぁいいや。

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2009/09/08 10:06

ご質問の意味がよくわかりませんが…

勝手に想像して、こういうことでしょうか？
<html>
<head>
<style type="text/css">
select { width:80px; display:block; float:left; }
.left { float:left; padding:8px 12px;}
</style>

<script type="text/javascript">
function move(n) {
var e1 = document.getElementById('sel1');
var e2 = document.getElementById('sel2');
var esorc = n?e2:e1, edest = n?e1:e2;
var idx = esorc.selectedIndex;
if (idx>=0){
e1 = esorc.options[idx];
edest.insertBefore(e1.cloneNode(true),edest.firstChild);
esorc.removeChild(e1);
if (e2=esorc.options[idx]) e2.selected = false;
}
}
</script>
</head>

<body>
<select id="sel1" size=6>
<option value="A1">textA1
<option value="A2">textA2
<option value="A3">textA3
<option value="A4">textA4
</select>

<div class="left">
<button onclick="move(0);">>></button>
<p><button onclick="move(1);"><<</button>
</div>

<select id="sel2" size=6>
<option value="B1">textB1
<option value="B2">textB2
<option value="B3">textB3
<option value="B4">textB4
</select>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2009/09/08 09:29

＞上から値を追加

だけでまず考えてみるとして

<script>
var num=3;
function test(){
var s1=document.getElementById("s1");
var op=document.createElement("option");
op.setAttribute("value",++num);
op.appendChild(document.createTextNode(num));
s1.insertBefore(op,s1.getElementsByTagName("option")[0]);
s1.selectedIndex=0;
}
</script>
<form>
<select id="s1">
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
<input type="button" value="add" onclick="test()">
</form>

この回答への補足

重ね重ねすいません。
皆様の回答大変参考になりました。
しかし自分の力不足で流用することができませんでした。。。
下記のスクリプトに当て込むとするとどうしたらいいでしょうか？
js------------------------------------------------------
var listM, listS;
window.onload=function(){
var e = document.getElementsByTagName('form');
if(e){
listM = e[1].elements['master_list'];
listS = e[1].elements['select_list'];
}
var labels = document.getElementsByTagName('label');
for(var i = 0; i < labels.length; i++){
var label = labels[i];
if(label.attachEvent){ // only IE
label.attachEvent('onmouseover', label_over);
label.attachEvent('onmouseout', label_out);
}
}
}
function portlet_move(a,b,c){
var ops, op, mop, cnt=0, f=0;
if(b==1){
//*** add ***
ops = listM.options;
while(op = ops[cnt++])if(op.selected){f=cnt; break;}
if(f){
mop = ops[--f]; ops = listS.options; cnt=0; f=1;
while(op = ops[cnt++])if(op.value == mop.value) f=0;
if(f) ops[ops.length] = new Option(mop.text, mop.value);
}
}else{
//*** delete ***
ops = listS.options;
while(op = ops[cnt++]) op.selected && listS.removeChild(op);
}
}

function data_sum(a,b){
var buff = "";
for(n = 0; n < a.select_list.length; n++){
buff = buff + a.select_list.options[n].value;
}
a.select_list_data.value = buff;
a.type.value = b;
a.submit();
}

function data_send(a,b){
var buff = "";
for(n = 0; n < a.select_list.length; n++){
buff = buff + a.select_list.options[n].value;
}
a.select_list_data.value = buff;
a.type.value = b;
a.send.value = "true";
a.submit();
}

html-------------------------------------------
<select size="10" name="master_list">
<option class="aaa" value="aaa"></option>
</select>
<input type="button" class="button" value="→" onclick="portlet_move(this.form,1,2);">
<br />
<input type="button" class="button" value="←" onclick="portlet_move(this.form,2,1);">

<select size="10" name="select_list">
<option class="aaa" value="aaa"></option>
</select>

<input type="button" class="button" value="登録" onclick="data_send(this.form,'recommended_write');" />