- ベストアンサー
リストボックスの項目の順番をボタンで上下に変更させたい。
リストボックスにならぶ項目をボタンを押して上下に移動させ、 並べ替えられるようなアクションが可能ならば教えていただけないでしょうか？
- spongebob-sqp
- お礼率36% (30/82)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
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)
こんな感じで、参考までに・・・。 <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>
