2019年6月11日火曜日

【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にすればいい

見た面はこうなる

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

0 件のコメント:

コメントを投稿