読者です 読者をやめる 読者になる 読者になる

サーバー構築メモ

サーバーを構築したりWEBサイトを作ったりした際の個人的な備忘録です

Javascript セレクトメニューで順番を重複しないように選択させる

WEBデザイン WEBデザイン-Javascript

順番を変更すると残りの順番をひとつずつずらして行き、重複しないようにする

「Javascript部分」

<script type="text/javascript">
<!--
//現在の順番の並びを保存しておくための配列
buff = new Array();

//最初は1から順番に設定する
function InitOrder(){
 var sum = document.form.order.length;
 for(i=0; i<sum; i++) {
  buff[i] = i;
  document.form.order[i].selectedIndex = i;
 }
}

 

//順番が変更されたとき
function ChangeOrder(pid){
 var sum = document.form.order.length;

 //セレクトメニューの変更前と変更後の順番を取得
 oldNO = buff[pid];
 newNO = document.form.order[pid].selectedIndex;

 //順番が前に移動したら影響を受ける配列の順番をひとつ後ろへ
 if (newNO<oldNO) {
  for(i=0; i<sum; i++) {
   if (newNO<=buff[i] && buff[i]<oldNO) {
    buff[i]++;
   }
  }
 //順番が後ろに移動したら影響を受ける配列の順番をひとつ前へ
 } else if (newNO>oldNO) {
  for(i=0; i<sum; i++) {
   if (oldNO<buff[i] && buff[i]<=newNO) {
    buff[i]--;
   }
  }
 }
 buff[pid] = newNO;

 //更新した配列をセレクトメニューに反映
 for(i=0; i<sum; i++) {
  document.form.order[i].selectedIndex = buff[i];
 }
}
// -->
</script>

「HTML部分」

……
<body onLoad="InitOrder()">
<form action="" name="form">
<select name="order" id="order" onChange="ChangeOrder(0)">
<option value="1">1</value>
<option value="2">2</value>
<option value="3">3</value>
<option value="4">4</value>
<option value="5">5</value>
</select>
<select name="order
" id="order" onChange="ChangeOrder(1)">
<option value="1">1</value>
<option value="2">2</value>
<option value="3">3</value>
<option value="4">4</value>
<option value="5">5</value>
</select>
<select name="order" id="order" onChange="ChangeOrder(2)">
<option value="1">1</value>
<option value="2">2</value>
<option value="3">3</value>
<option value="4">4</value>
<option value="5">5</value>
</select>
<select name="order
" id="order" onChange="ChangeOrder(3)">
<option value="1">1</value>
<option value="2">2</value>
<option value="3">3</value>
<option value="4">4</value>
<option value="5">5</value>
</select>
<select name="order[]" id="order" onChange="ChangeOrder(4)">
<option value="1">1</value>
<option value="2">2</value>
<option value="3">3</value>
<option value="4">4</value>
<option value="5">5</value>
</select>
</form>
……

サンプルはこちら。