表示内容の動的変更

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

0   名前： まゆ ： 2006/11/04（土） 16:46  ID:rFYujUxH
クライアント側に表示している内容をJavaScriptにて
かえれないかと色々書いていますが、どうもうまくいきません。

やりたいことは

要素として
１番目：あ
２番目：い
３番目：う
４番目：え
５番目：お
が内部的に存在し、

プルダウンにて「ａ」を選択された場合には
あ
う
え

プルダウンにて「ｂ」を選択された場合には
い
う
お

のように、画面に表示しているプルダウンのSelectのoptionを
ユーザが変更するたびに、画面に表示している内容をかえたい。

JavaScriptとstyleを使えば出来るかなと試行錯誤して
いますがどうもうまくいきません。

わかる方いましたらご教授願います。


【何をしたいのか】
→ 「このようにしたい」といった目的を具体的に記入してください。

【現在の状況】
→ どこがどううまくいかないのか、何がわからないのか、などを具体的に記入してください。

【何をしてみたのか】
→ これまでにどんなことを試したのか、どんなことを調べてみたのか、などを記入してください。
→ 必要に応じてソースやURLを提示してください。

【備考】
→ その他、回答者の参考になるような情報があれば記入してください。
→ 特定のツールに関連がある場合は、その名称やバージョンを記入してください。
→ ※矢印の付いた行は削除して使用してください。
1   名前： TEIDHO ： 2006/11/04（土） 16:46  ID:exOVSdhQ
「内部的に存在」するのがどのようにそんざいしているのかがわからなければ、
コードなど書けませんよ。
2   名前： 匿名 ： 2006/11/04（土） 16:46  ID:G1j6BrgN
親を選べば、子が、子を選べば孫がという意味なら、

プルダウン　階層メニュー　をキーワードに
JavaScriptでやりたいなら、それをキーワードに加える。
cssでやりたいなら、それをキーワードに加える。

検索サイトで試してみてください。Tipsのような物がたぶん出てきます。
それを見てみて、わからなかったらもっと具体的に質問するっていうのは
どうでしょうか？

もしくは、試行錯誤しているもの自体を見せてください。
でないと、始まりませんよ。
3   名前： 匿名 ： 2006/11/04（土） 16:46  ID:vF/mN4Au
http://www2u.biglobe.ne.jp/%7Eoz-07ams/prog/dom-ref/HTML/HTMLOptionElement.html#HTMLOptionElement-disabled
4   名前： m035 ◆Wpzr1YKOiq ： 2006/11/04（土） 16:46  ［URL］  ID:He.BzoXq
何を動的に表示切替するのかが問題でしょう。
>画面に表示している内容
文章や特定の要素の話ならcssのdisplayやvisibilityを変更するか、DOMで内容を直接変更するとできるでしょう。
セレクトボックスの内容についてなら、これまたDOM。
disabledは無効化なので切り替えとはちょっと違うかな、と思います。

>>2
>もしくは、試行錯誤しているもの自体を見せてください。
>でないと、始まりませんよ。
同意見です。
5   名前： 匿名 ： 2006/11/04（土） 16:46  ID:vF/mN4Au
>>4
> disabledは無効化なので切り替えとはちょっと違うかな、と思います。

>>3では

option[disabled="disabled"] { display: none; }


と組み合わせて使うことを想定してたんだが。試してないけど（苦笑
IEは属性セレクタ使えないけど、どうせ似たようなことはできるからね。

その意味では、>>0の
> JavaScriptとstyleを使えば出来るかなと試行錯誤して
という直感は正しかったと思う。
試行錯誤コードがないので何ともなのは数々の指摘の通りだが。
6   名前： 匿名 ： 2006/11/04（土） 16:46  ID:vF/mN4Au
>>6
すまん、今確認してみたんだが

http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/option.asp
> Except for background-color and color, style settings applied
> through the style object for the option element are ignored.

というわけで、>>3と>>5の提案は却下。IE以外なら何とかなるけどねえ。
つうか、本当に面倒くさいな、IE。
7   名前： まゆ ： 2006/11/04（土） 16:46  ID:/LALz7ZS
返信遅れました。いろいろと下記コードのように試しています。
選択したプルダウンの内容で、表示するデータを選んで
表示させたいと思っています。
（テーブル構造は下記コードから抜いています）

<html>
<head>
<script type='text/javascript'>
<!-- //
var g_bun="初期化";
var week = new Array(5);
for(i = 0; i <= 5; i++){
week[i] = new Array(2);
}
week[0][0] = "0";
week[1][0] = "1";
week[2][0] = "1";
week[3][0] = "0";
week[4][0] = "1";

week[0][1] = "あ";
week[1][1] = "い";
week[2][1] = "う";
week[3][1] = "え";
week[4][1] = "お";


function funBun(layname){
g_bun ="";
if(layname == "test1"){
for(i = 0; i <= 5; i++){
if(week[i][0]=="0"){
g_bun = g_bun + "<tr> <td>" + week[i][1] + "</td></tr>";
}
}
} else {
for(i = 0; i <= 5; i++){
if(week[i][0]=="1"){
g_bun = g_bun + "<tr> <td>" + week[i][1] + "</td></tr>";
}
}
}
}

function showLAYER(layName){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.visibility='visible'
else if(document.all) //e4用
document.all(layName).style.visibility='visible'
else if(document.layers) //n4用
document.layers[layName].visibility='show'
}

function hideLAYER(layName){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.visibility='hidden'
else if(document.all) //e4用
document.all(layName).style.visibility='hidden'
else if(document.layers) //n4用
document.layers[layName].visibility='hide'
}

//-->
</script>
<style type="text/css">
<!--
.posabs { position : absolute ;
font-family : Osaka,'MS PGothic' ;
}

#test0 { left : 50px ;
top : 120px ;
font-size : 30pt ;
visibility : hidden ;
}
#test1 { left : 50px ;
top : 120px ;
font-size : 30pt ;
visibility : hidden ;
}
#option0 { left : 50px ;
top : 80px ;
}
-->
</style>
</head>
<body >

<div class="posabs" id="test0">2最初に表示テスト</div>
<div class="posabs" id="test1">
<SCRIPT language="JavaScript">
<!--
var wHensu="次の表示テスト用？";
document.write(g_bun);
//-->
</SCRIPT>

</div>

<div class="posabs" id="option0">
<form name="f1">
<select name="s1"
onchange="eval(this.options[this.selectedIndex].value)">
<option value="alert('下のどれか')">下のどれか
<option value="funBun('test1');hideLAYER('test1');showLAYER('test0')">J
<option value="hideLAYER('test0');showLAYER('test1')">H
</select>
</form>
</div>

<center>
<font size=+3 color=#ff0000>選ぶ</font><p>
<hr>
<br><br><br><br><br><br><br>
<hr>
<p>
</center>
</body>
</html>

一覧へ戻る