ベストアンサー

リストボックスの項目の順番をボタンで上下に変更させたい。

2007/06/01 01:43

リストボックスにならぶ項目をボタンを押して上下に移動させ、並べ替えられるようなアクションが可能ならば教えていただけないでしょうか？

spongebob-sqp
お礼率36% (30/82)

JavaScript
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

steel_gray
ベストアンサー率66% (1052/1578)

2007/06/01 06:59 回答No.1

removeChildとinsertBeforeでしょうか？例） <html> <head> <title></title> <style type="text/css"> </style> <script type="text/javascript"> function buttonStyle(O){ var UpButton = document.getElementById('UPBUTTON'); var DownButton = document.getElementById('DOWNBUTTON'); for(var i=0;i<O.options.length;i++){ if(O.options[i].selected){ if(i!=0) UpButton.disabled = false; else UpButton.disabled = true; if(i!=(O.options.length-1)) DownButton.disabled = false; else DownButton.disabled = true; } } } function optionMove(MODE) { var O = document.getElementById('SEL1'); for(var i=0;i<O.options.length;i++) if(O.options[i].selected) break; var tmpOption = O.removeChild(O.options[i]); O.insertBefore(tmpOption,O.options[i+MODE]) buttonStyle(O); } </script> </head> <body> <p> <select size="4" onchange="buttonStyle(this)" id="SEL1"> <option>犬</option> <option>猫</option> <option>うさぎ</option> <option>ハムスター</option> </select> </p><p> <input type="button" value="上に" id="UPBUTTON" disabled onclick="optionMove(-1)"> <input type="button" value="下に" id="DOWNBUTTON" disabled onclick="optionMove(1)"> <p> </body> </html>

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

yambejp
ベストアンサー率51% (3827/7415)

2007/06/01 11:07 回答No.2

こんな感じで、参考までに・・・。 <script language=javascript> function moveopt(selid,num){ var sel=document.getElementById(selid); if(sel.selectedIndex<0) return false; if(sel.selectedIndex==0 && num<0) return false; if(sel.selectedIndex==sel.length -1 && num>0) return false; var idx=sel.selectedIndex; sel.insertBefore(sel.options[idx],sel.options[idx+(num>0?num+1:num)]); sel.selectedIndex=idx+num; } function delopt(selid){ var sel=document.getElementById(selid); if(sel.selectedIndex<0) return false; var idx=sel.selectedIndex; var opt=sel.options[idx]; sel.removeChild(opt); sel.selectedIndex=(sel.length==idx)?idx -1:idx; } function addopt(f,selid,keyid,textid){ var sel=document.getElementById(selid); var keyval=document.getElementById(keyid).value; var textval=document.getElementById(textid).value; if(keyval=="" || textval=="") return false; var opt = document.createElement("option"); var str = document.createTextNode(textval); opt.appendChild(str); opt.setAttribute("value",keyval); var idx=sel.selectedIndex; if(idx<0) idx=0; sel.insertBefore(opt,sel.options[idx]); sel.selectedIndex=idx; } </script> <form> <select id="hoge" multiple style="height:100px;width:80px;"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <hr> <input type="button" value="↑"onClick="moveopt('hoge',-1)" > <input type="button" value="↓"onClick="moveopt('hoge',1)" > <input type="button" value="追加" onClick="addopt(this.form,'hoge','addkey','addtext')" > <input type="button" value="削除" onClick="delopt('hoge')" > <input type="button" value="てすと" onClick="alert(this.form.hoge.innerHTML)"> <hr> キー<input tyle="text" id="addkey" value="testkey"> テキスト：<input tyle="text" id="addtext" value="てすと"> </form>

ログインすると、全ての回答が全文表示されます。