![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
セレクトボックスの中を一部隠したいのですが、IEでは隠れてくれません。firefoxなどでは、ちゃんと隠れるのですが、IEではどのようにすれば隠れるのでしょうか?
(例) 以下のセレクトボックスで、0・1のみ表示されるようにしたいです。
<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ベストアンサー
- 回答日時:
こんにちは
すみません。補足回答するの忘れておりましたm(--)m
>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
- 回答日時:
こんにちは
どのような感じで表示・非表示を切り替えるのか分かりませんが・・・
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 』の表示 )
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字の横にプルダウンを表示さ...
-
プルダウンリストの背景色の指定
-
セレクトボックスのselected属...
-
セレクトメニューで選んだ値を...
-
テーブル内でドロップダウンメ...
-
セレクトメニューで2つの項目...
-
<SELECT>タグの折り返し
-
html select optionが左寄せに...
-
携帯サイト作成中、携帯上でプ...
-
セレクトボックスの文字
-
JSONで文字列が長い時
-
Application.ScreenUpdating = ...
-
formで特定のinputを送信しない...
-
メモリをアドレスを直接指定し...
-
実行時エラー 3020の対策
-
【至急!!!】python言語で本を見...
-
コンボボックスのtag情報の取得...
-
pythonで改行を含めてfindする方法
-
pythonの*
-
【python】辞書作成(ネスト)を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
文字の横にプルダウンを表示さ...
-
<SELECT>タグの折り返し
-
セレクトメニューで2つの項目...
-
テーブル内でドロップダウンメ...
-
セレクトボックスのselected属...
-
複数列を持ったリストボックス...
-
同じものを繰り返し表示させる
-
セレクトボックスから別窓にジ...
-
セレクトボックスの「選択して...
-
セレクトボックスである項目を...
-
プルダウンメニューの幅
-
SELECT OPTIONの中身をコピペ...
-
プルダウンリストの背景色の指定
-
selectタグ内の特定のoptionの...
-
ドロップダウンリストのselecte...
-
【プルダウンで選んでGOボタン...
-
セレクトメニューで選んだ値を...
-
セレクトボックスの中を一部隠...
-
プルダウンメニューのターゲッ...
-
HTMLでメディアプレイヤーの再...
おすすめ情報