select要素の重複チェック

Friday, Feb 24, 2006 - 02:30 +09:00

仕事で作った簡単JSそのに。select要素からｖａｌｕｅ属性を取り出して、重複している値があれば警告を出すスクリプト。プルダウン・メニューによる複数選択時に、同じ項目を選ばせたくない時などに使う。

項目を選択
No.1 No.2 No.3 No.4 No.5

Script

<script type="text/javascript">
<!--
 
function checkSelect(n) {
  var No1 = n.no1.options[n.no1.options.selectedIndex].value;
  var No2 = n.no2.options[n.no2.options.selectedIndex].value;
  var No3 = n.no3.options[n.no3.options.selectedIndex].value;
  var No4 = n.no4.options[n.no4.options.selectedIndex].value;
  var No5 = n.no5.options[n.no5.options.selectedIndex].value;
 
  var sum5 = new Array(No1,No2,No3,No4,No5);
  h = new Object();
 
  for(i=0; i<sum5.length; i++) {
    if(!h[sum5[i]]) {
      h[sum5[i]] = 1;
    } else {
      alert("値が重複しています");
      return false;
    }
  }
 
  return true;
 
}
 
//-->
</script>

HTML

<form action="#" method="get" onsubmit="return checkSelect(this);">
 
<fieldset>
<legend>項目を選択</legend>
<table width="300" border="1" cellspacing="1" class="pad5">
  <colgroup span="5" width="20%" align="center"></colgroup>
 
  <thead>
    <tr>
    <th>No.1</th>
    <th>No.2</th>
    <th>No.3</th>
    <th>No.4</th>
    <th>No.5</th>
    </tr>
  </thead>
 
  <tbody>
    <tr>
    <td>
      <select name="no1">
      <option value="01" selected="selected">001</option>
      <option value="02">002</option>
      <option value="03">003</option>
      <option value="04">004</option>
      <option value="05">005</option>
      </select>
    </td>
    <td>
      <select name="no2">
      <option value="01" selected="selected">001</option>
      <option value="02">002</option>
      <option value="03">003</option>
      <option value="04">004</option>
      <option value="05">005</option>
      </select>
    </td>
    <td>
      <select name="no3">
      <option value="01">001</option>
      <option value="02">002</option>
      <option value="03" selected="selected">003</option>
      <option value="04">004</option>
      <option value="05">005</option>
      </select>
    </td>
    <td>
      <select name="no4">
      <option value="01">001</option>
      <option value="02">002</option>
      <option value="03">003</option>
      <option value="04" selected="selected">004</option>
      <option value="05">005</option>
      </select>
    </td>
    <td>
      <select name="no5">
      <option value="01">001</option>
      <option value="02">002</option>
      <option value="03">003</option>
      <option value="04">004</option>
      <option value="05" selected="selected">005</option>
      </select>
    </td>
    </tr>
  </tbody>
</table>
 
<p><input type="submit" value="　送信　" /></p>
</fieldset>
</form>

備考

  1. 選択された値を取得する
  2. 取得した値を配列に格納
  3. 新規にオブジェクトを作成
  4. 配列の中身をインデックス値として、新オブジェクトに定義
  5. その時点で中身が無ければ、1を代入
  6. 既に定義された配列には「1」が入っているので、alert()が起動

posted in Javascript Trackback (0)

Trackback

このエントリーのトラックバックURL
http://rospear.info/other/mt-tb.cgi/162

« Previous Entry - Next Entry »