重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：spongebob-sqp
  • 質問日時：
  • 回答数：2件

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

通報する

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

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： steel_gray
  • 回答日時：

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>
    • good
    • 2
    • 件
通報する

No.2

  • 回答者： yambejp
  • 回答日時：

こんな感じで、参考までに・・・。



<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>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報