セレクトボックスの中を一部隠したい ( IE )

質問

セレクトボックスの中を一部隠したいのですが、IEでは隠れてくれません。firefoxなどでは、ちゃんと隠れるのですが、IEではどのようにすれば隠れるのでしょうか？

（例）　以下のセレクトボックスで、0・１のみ表示されるようにしたいです。

<select name="s" id="s">
<option value="0" name="s[0]" id="s[0]" >0</option>
<option value="1" name="s[1]" id="s[1]" >1</option>
<option value="2" name="s[2]" id="s[2]" style="display:none;">2</option>
</select>

また、javascriptで隠した部分を表示・非表示したいのですが、あわせて教えていただけないでしょうか。

firefox など、では以下で変化があるのですが、
document.getElementById('s[2]').style.display='block';　　　//表示
document.getElementById('s[2]').style.display='none';　　　//非表示

IE　ではうんともすんともいってくれません・・・
document.all('s[2]').style.display='block';　　　//表示
document.all('s[2]').style.display='none';　　　//非表示

ちなみにテスト環境はIE7になります、よろしくお願いいたします。

回答No.2

leap_day · ベストアンサー

こんにちは

すみません。補足回答するの忘れておりましたｍ（－－）ｍ

＞IEでの動作に困っております。　
IEでは<option>にはdisplay、visibilityは利きません
他にも利かないstyle属性はあるようです
＝＞すみません書くの忘れていました

＞削除について
<option value="0">0</option>　(->options[0])
<option value="1">1</option>　(->options[1])
<option value="2">2</option>　(->options[2])
<option value="3">3</option>　(->options[3])

となってるわけですが
obj.options[0] = null;
を実行した時点で既にoptions[0]はなくなっていますので

<option value="1">1</option>　(->options[0])
<option value="2">2</option>　(->options[1])
<option value="3">3</option>　(->options[2])
という風に変わっています
そのため次に
obj.options[1] = null;
としたときには
<option value="2">2</option>
が削除対象となります

そのため結果が『1と3』になるわけです

ですので削除するときには上に上がってきても問題ないように下(数の多い方)から削除していきます

<script language="javascript"><!--
function b() {
obj = document.f.s;
obj.options[1] = null;
obj.options[0] = null;
}
//--></script>

こうすることによって
<option value="0">0</option>　(->options[0])
<option value="1">1</option>　(->options[1])
<option value="2">2</option>　(->options[2])
<option value="3">3</option>　(->options[3])

obj.options[1] = null;で『1』を消して

<option value="0">0</option>　(->options[0])
<option value="2">2</option>　(->options[1])
<option value="3">3</option>　(->options[2])

obj.options[0] = null;で『0』を消します

ん～～数が多いとなるともう一度押すと『2と3』も削除可能になっちゃうのでボタンをdisabled化するとかvalue値が一致した時に削除するとか条件を追加した方がいいかもしれませんね

<script language="javascript"><!--
function b() {
obj = document.f.s;
if(obj.options[1].value=="1") obj.options[1] = null;
if(obj.options[0].value=="0") obj.options[0] = null;
}

お礼

返事が遅くなって申し訳ありません。

>>IEでは<option>にはdisplay、visibilityは利きません
>>他にも利かないstyle属性はあるようです

そうなのですか、利かないのはしかたないことですよね。IEは動作が独特で本当にやっかいです・・・

詳しく説明していただきましてありがとうございました、とても参考になりました。

回答No.1

leap_day

こんにちは

どのような感じで表示・非表示を切り替えるのか分かりませんが・・・
display:none;にしてもvisibility:hidden;にしてもOperaでは見えなくなるだけで存在しているので選択も送信も出来ます（disabledをつければ選択は出来ませんが空白optionが出来ます）
javascriptで<option>の追加や削除をしては？

<script language="javascript"><!--
function a() {
obj = document.f.s;
obj.options[2] = new Option("2","2");
}
function b() {
obj = document.f.s;
obj.options[2] = null;
}
//--></script>

<form name="f">
<select name="s" id="s">
<option value="0">0</option>
<option value="1">1</option>
</select>
</form>
<input type="button" onClick="a()" value="追加">
<input type="button" onClick="b()" value="削除">

とりあえず質問を対称にしていますので汎用性を求めるにはfunction内を少々変えてやる必要があると思いますが・・・
new Option("表示させるもの","value値")

補足

>>どのような感じで表示・非表示を切り替えるのか分かりませんが・・・

失礼しました、このような感じです。　（　IEも同様　）

<input type='button' value='表示' onclick='change(1)'>
<input type='button' value='非表示' onclick='change(2)'>

<script language="javascript"><!--
function change(a) {
if(a=1){ document.getElementById('s[2]').style.display='block'; }
if(a=2){ document.getElementById('s[2]').style.display='none'; }
}
//--></script>

>>display:none;にしてもvisibility:hidden;にしてもOperaでは見えなくなるだけで存在しているので選択も送信も出来ます

IEでの動作に困っております。　

>>javascriptで<option>の追加や削除をしては？

実際は<option>が数十個あるのですが、 document.f.s.options[2] = null;　でオプションをなくす方法は、どうも挙動が思いどうりに実行されません・・・

<form name="f">
<select name="s" id="s">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>

<script language="javascript"><!--
function b() {
obj = document.f.s;
obj.options[0] = null;
obj.options[1] = null;
}
//--></script>
<input type="button" onClick="b()" value="削除">

結果は　『 1 と 3　』　が表示される。　（　希望は『　2 と 3 』の表示　）