プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：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&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

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

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

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

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

おすすめ情報