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>
……