optionを非表示にするには。

[新着] Webテンプレートを仮オープンしました

0   名前： NullPo ： 2007/02/16（金） 09:20  ID:Z0FHbpib sub-ii
optionの非表示を行いたいです。

以下の場合に、4つめのoptionは表示しないようにして、javascriptで操作して選択したいのですが、どうしたらいいのでしょうか。
<select>
<option value="1">1
<option value="2">2
<option value="3">3
<!-- <option value="4">4 -->
</select>

スタイルシートで
display:none
visibility:hidden
height:0
は試しましたが、いずれも無視されてしまいました。

よろしくお願いします。
1   名前： NullPo ： 2007/02/16（金） 09:20  ID:Z0FHbpib sub-ii
追記：
コメントになってますが、もちろん実際には外して記述します。

disabled属性を試しましたが、IEでは実装していない模様。
2   名前： 匿名 ： 2007/02/16（金） 09:20  ID:rEkc4Z1y sub-kJ
非表示にして何をするかにもよるけど。非表示にしただけでは提出されうる。

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/forms.html#h-17.13.2
隠れコントロールやスタイルシートの設定で非表示になっているコントロールは、満足になれる［注：提出される、の意］。

Gecko、Opera なら、option[disabled] { display: none; } にしておけば、disabled を与えた時点で消えるし提出もされない。

IE、Safari は、option 要素の disabled もスタイル指定も効かない以上、DOM ツリーから引っこ抜くしかないかと。
3   名前： 匿名 ： 2007/02/16（金） 09:20  ID:rEkc4Z1y sub-kJ
ほとんどギャグだけど、>>0 と同じような状態を作ってみる。つまり、不要な option 要素をコメント内に入れてみる。
<form action="#">
<p><select><option>A</option><option>B</option><option>C</option></select>
</form>
    
<script type="text/javascript">
var o = document.forms[0].elements[0].options[2]; // C
o.disabled = true;

// IE、Safari に対して
var c = document.createComment ();
c.data = o.outerHTML;
o.parentNode.replaceChild (c, o);
</script>

もちろん、コメントノードは HTMLSelectElement.options のコレクションには入らない。だが、元あった option ノードの痕跡を残すことならできる。
4   名前： 匿名 ： 2007/02/16（金） 09:20  ID:rEkc4Z1y sub-kJ
連投ごめん。

>>0
> 4つめのoptionは表示しないようにして、javascriptで操作して選択したい

今見返したら「表示しないようにして」の「にして」を読み飛ばしていたので、質問の意図を正反対に捉えていた。ごめん。>>2-3 は無かったことにしてちょ。

とにかく、IE、Safari は option 要素へのスタイル指定が効かないので、「表示させない」ためには、ノードを部分木に入れないようにするしかないと思う。今のところ、私はそれ以外の方法を思い付かない。どなたか。
5   名前： NullPo ： 2007/02/16（金） 09:20  ID:Wu/E4gla sub-.G
>>2-4
ありがとうございます。
コメントにいれるとか面白いですね。

ノードを部分木にいれないっていうのは、対象のoption要素をselect要素から外しちゃうってことですよね。
むむ、それはscriptでも選択できない気がする。


とりあえず、対象のoptionは直接htmlには書かないで、scriptで追加することにします。
苦肉の策でしかないので、他に方法があればお願いします。
6   名前： 匿名 ： 2007/02/16（金） 09:20  ID:rEkc4Z1y sub-kJ
具体的にどういう UI になるの？ スクリプトで選択するなら、選択肢をわざわざユーザに見せる必要があるのか、別のコントロールにすべきではないのか、という点で引っ掛かってしまうのだけど。

今考えたのは、ユーザに見せる select（1-3 のみ）と、ユーザには見えない select（1-4）の 2 つを用意し、適当に同期をとる。送信時に 2 つを入れ替えるとか。

どうせスクリプトでの選択なら、select と同名の input[@type="hidden"] を生成し、サーバ側で同名のコントロールがなかったかチェックするとか。
7   名前： NullPo ： 2007/02/16（金） 09:20  ID:Z0FHbpib sub-ii
>>6
すみません、他のコントロールを思いつかないので。
選択肢はユーザが見る必要はありませんが、スクリプトで選択した状態になったときは、できれば見せたいです。

> 今考えたのは、ユーザに見せる select（1-3 のみ）と、ユーザには見えない select（1-4）の 2 つを用意し、適当に同期をとる。送信時に 2 つを入れ替えるとか。
これいいですね。
4が選択された時点で置き換えれば良さそうです。
スクリプト操作では1-4のいずれが選択されるかわからないので1-3のselectに選択肢があるかないか判断する必要があってちょっとめんどくさいですけど、一番近いかもしれないです。

> 具体的にどういう UI になるの？
説明が足りなくてすみません。
value値やテキストは違うんですが、1-3の選択をユーザが選択しサーバに送信します。
そのユーザが選択できない項目を選択している場合は他の選択肢に置き換えてユーザ側に渡します。
ここで選択される値が1-4のいずれかで、4が選択されている時はユーザからは4が追加されたように見えます。
4が選択されている場合でも1-4のいずれかをユーザが選択できます。
再びユーザが送信して処理終了です。
一覧へ戻る