読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

<select>で複数の値を選択可能にする、その際の注意点

HTML&CSS pitfalls WebDev

 HTMLのselect要素を使って複数選択をさせたいケースがあります。HTMLタグ的にはシンプルで済みます。以下が簡略化した上での例です。

<p>
	<label>Pythons</label>
	<br/>
	<select  name="pythons[]" multiple size="6" style="width:100%;">
                <option>Graham Chapman</option>
                <option>John Cleese</option>
                <option>Eric Idle</option>
                <option>Terry Jones</option>
                <option>Michael Palin</option>
                <option>Terry Gilliam</option>
   </select>
</p>

 ポイントは、multipleの部分なのですが、これはmultiple="multiple"でも可能です。
 で、ここからが本題なのですが、これを複数選択するには、チェックボックスの時と違って、入力上の工夫が必要になります。Tryit Editor v2.1 に書いてあったのですが、selectの場合は、ターミナルと同じように、commandを押しながら選択しなければなりません。つまり、チェックボックス感覚でselectの複数を選択しようとするとmultipleが効いていないように見えて参ったことになってしまうわけです(今回の私です)。
 jsfiddle.netにも置いたので試したい方はどうぞ。

select multiple options - JSFiddle