2019年6月10日月曜日

複数のSELECT要素の重複チェックjavascript

第一希望~第三希望までセレクトボックスで作ったはいいけど選択肢は重複してほしくないときに使えるJavascript
やることは値を配列に入れてforで回して配列の位置と最後の位置を取得して違っていれば重複している

javascript

function check() {
  var select1 = document.hoge.select1.options[document.hoge.select1.options.selectedIndex].value;
  var select2 = document.hoge.select1.options[document.hoge.select2.options.selectedIndex].value;
  var select3 = document.hoge.select1.options[document.hoge.select3.options.selectedIndex].value;
  var select4 = document.hoge.select1.options[document.hoge.select4.options.selectedIndex].value;
  var array = new Array(select1,select2,select3,select4);
  
   for(i=0; i<array.length; i++) {
   		if(array.indexOf(array[i]) !== array.lastIndexOf(array[i])){
   			alert("値が重複しています");
   			return false;
   		}
   }
}
html

<form name="hoge">
      <select name="select1">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
      <option value="d">d</option>
      <option value="e">e</option>
      </select>
      
      <select name="select2">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
      <option value="d">d</option>
      <option value="e">e</option>
      </select>
      
      <select name="select3">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
      <option value="d">d</option>
      <option value="e">e</option>
      </select>
      
      <select name="select4">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
      <option value="d">d</option>
      <option value="e">e</option>
      </select>
      <input type="button" onclick="check()" value="check" />
</form> 


メモ

0 件のコメント:

コメントを投稿