select 表示順

質問

お世話になります。

selectボックスに表示されているデータの表示順を変える方法について、質問します。

DBより読み込んだselectボックス（ｖMENU1）
<select size="15" style="width:200;height=220" name="vMenu1">
<option value="P1">みかん</option>
<option value="P2">りんご</option>
<option value="P3">すいか</option>
<option value="P4">なし</option>
</select>
とあり、

移動ボタンor削除ボタンで
もうひとつのselectボックス（ｖMENU2）へ選択したデータを移動し、
（例えば、りんごとすいか）
<select size="15" style="width:200;height=220" name="vMenu2">
<option value="P2">りんご</option>
<option value="P3">すいか</option>
</select>

更に、この表示順をドラッグ＆ドロップで表示順を変えて、
（りんご、すいかの配列をすいか、りんごへ変更）
DBへ送信したいのです。

ご存知の方よろしくお願いします。

回答No.1

yambejp · ベストアンサー

とりあえず１つのセレクトボックスでやるとこんな感じです。
結局セレクトボックスは選択しているものしかおくられないので
順序をかえたり削除したりしても、そのままではサーバーに送られません。
そうなるとmultipulにして全て選択するか、別にhidden枠をつくって
値をわたすことになります。今回はhiddenでやりました。

<script language="Javascript">
function shift(f,name,num){
var obj=f[name];
if(obj.selectedIndex<0) return false;
if(obj.selectedIndex==0 && num<0) return false;
if(obj.selectedIndex==obj.length -1 && num>0) return false;
var idx=obj.selectedIndex;
var opt=obj.options[idx];
var val=opt.value;
var txt=opt.text;
var ele=document.createElement("option");
ele.setAttribute("value",val);
ele.appendChild(document.createTextNode(txt))
obj.removeChild(opt);
obj.insertBefore(ele,obj.options[idx+num]);
obj.selectedIndex=idx+num;
}
function delopt(f,selname){
var obj=f[selname];
if(obj.selectedIndex<0) return false;
var idx=obj.selectedIndex;
var opt=obj.options[idx];
obj.removeChild(opt);
}
function setJunjo(f,selname){
var sel=f[selname];
sel.selectedIndex=-1;
var str="";
for (var i=0;i<sel.length;i++){
str+=(str==""?"":" ")+sel[i].value;
}

f.junjo.value=str;
return true;
}
</script>
<form action="hoge.php" method="get" onSubmit="return setJunjo(this,'vMenu1')">
<select size="15" style="width:200;height:220;" name="vMenu1">
<option value="P1">みかん</option>
<option value="P2">りんご</option>
<option value="P3">すいか</option>
<option value="P4">なし</option>
</select>
<br />
<input type="button" value="上へ"onClick="shift(this.form,'vMenu1',-1)">
<input type="button" value="下へ"onClick="shift(this.form,'vMenu1',1)">
<input type="button" value="削除"onClick="delopt(this.form,'vMenu1')">
<input type="hidden" name="junjo" >
<input type="submit" value="送る" >
</form>

お礼

素晴らしいです。
参考にさせていただきます。
ありがとうございました。