【HTML】SELECT要素のreadonly

HTML のSELECT要素はreadonly属性がない
同じ画面内で検索、検索後は検索時のFORM部品をreadonlyにしたいときなんかに困る
disabledで良い場合もあるが、値を送信したいときにやはり困る
input hiddenに値を持たせて送信というのも一つの手だが疑似的にreadonlyを実装すると以下のようになる

<select name="hoge">
 <option disabled="disabled" value="hoge">hoge</option>
 <option selected="selected" value="fuga">fuga</option>
 <option disabled="disabled" value="piyo">piyo</option>
</select>

なんとことはない、selectedしたoption要素以外はdisabledにすればいい

見た面はこうなる
hoge fuga piyo
クリックできるし一覧も見れるが値は変えられない
値も送信されるため疑似的にreadonlyとなる

複数の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> 

a b c d e a b c d e a b c d e a b c d e

メモ