HTMLのSelectコントロールを、チェックボックスと、JavaScriptを使って、表示/非表示させたいのですが、どの様にすればよろしいでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/05/16 23:39:19
  • 終了:2006/05/21 13:12:52

回答(4件)

id:llusall No.1

llusall回答回数505ベストアンサー獲得回数612006/05/16 23:54:38

ポイント23pt

これで、どうでしょうか?

http://www.yahoo.co.jp ダミー

<html>

<head>

<title></title>

</head>

<body>

<select id="idSel">

<option value="a">aaaa

<option value="b">bbbb

<option value="c">cccc

</select>

<br><br>

<input id="idChk" type="checkbox" onClick="disp()" checked >表示非表示<br>

</body>

</html>

<script language="JavaScript">

<!--

function disp()

{

    if(document.all.idChk.checked){

        document.all.idSel.style.display = "block";

    }else{

        document.all.idSel.style.display = "none";

    }

}

//-->

</script>

id:kazu1107 No.2

kazu1107回答回数199ベストアンサー獲得回数142006/05/16 23:59:03

ポイント23pt

http://egis-s.hp.infoseek.co.jp/garakuta/showhide.html

ここにあるのはテーブルの非表示の例ですが、Selectコントロールにidを指定すればつかえるかと思います。(テストはしてませんが・・・もし出来なければ

<コントロール>
とすれば確実にできるかと。)

URLの解説ではにJavaScriptコードを書き込んでhiddenとvisitedを切り替える関数を呼んでます。同じ事をチェックボックスに応用すればいけるはずです。

id:yoneto164 No.3

ヨネちゃん回答回数813ベストアンサー獲得回数942006/05/17 03:51:03

ポイント22pt

http://www.geocities.co.jp/SiliconValley/1716/DHTML_javascript.h...

等を参考にされると良いかと思いますが、こんな感じでしょうか。

<html>

<body>

<script language="Javascript">

function Click_Sub() {

  if (document.all.y1.checked==true) {

    document.all.div1.style.display = "block"

  } else {

    document.all.div1.style.display = "none"

  }

}

</script>

<input id="y1" type="checkbox" onclick="Click_Sub()">←チェック

<div id="div1" style={display:none;}>

この部分が表示されます

</div>

</body>

</html>

id:aki73ix No.4

aki73ix回答回数5224ベストアンサー獲得回数272006/05/17 09:24:08

ポイント22pt

http://nifberry.727.net/test/hatena191.htm

まず、Selectコントロールの表示をJavaScriptで定義します

var exp = new Array();

exp[1]='食べ物リスト:<select name="food"><option value="0">りんご<option value="1" selected>めろん<option value="2">ぶどう<option value="3">いちご</select><BR>';   //レイヤ1の表示内容

exp[2]='動物リスト:<select name="animal"><option value="0">ねこ<option value="1" selected>いぬ<option value="2">うま<option value="3">はむすたー</select><BR>';  //レイヤ2の表示内容

HTML内でForm 内でレイヤーの設定とCheckBoxの配置をします

<form name="form1">

<INPUT TYPE="checkbox" checked name="chk1" onClick="javascript:xOpen(1,document.form1.chk1.checked);">食べ物表示<BR>

<INPUT TYPE="checkbox" checked name="chk2" onClick="javascript:xOpen(2,document.form1.chk2.checked);">動物表示<BR>

<SPAN ID="LAYER1A"><ilayer name="LAYER1B"><layer name="LAYER1C">

<SCRIPT LANGAGE="JavaScript"><!--

  document.write(exp[1]); //初期値1

//--></SCRIPT>

</layer></ilayer></SPAN>

<SPAN ID="LAYER2A"><ilayer name="LAYER2B"><layer name="LAYER2C">

<SCRIPT LANGAGE="JavaScript"><!--

  document.write(exp[2]); //初期値2

//--></SCRIPT>

</layer></ilayer></SPAN>

<INPUT type="submit" value="送信">

</form>

CheckBoxがクリックされるとxOpen関数が1.何番目のレイヤーか2.チェックボックスのON/OFFを引数に呼び出され、表示するか消去するかを決定します

function xOpen(x,flag){ //表示切り替え処理

  if(flag){

    dsp=exp[x];

  }

  else{

    dsp='';

  }

 if(x==1)if(document.layers){

// Netscape 4.x

  document.LAYER1B.document.LAYER1C.document.open();

  document.LAYER1B.document.LAYER1C.document.write(dsp);

  document.LAYER1B.document.LAYER1C.document.close();

 } else {

// IE 4~,Netscape 6~

    document.getElementById("LAYER1A").innerHTML=dsp;

 }

 if(x==2)if(document.layers){

// Netscape 4.x

  document.LAYER2B.document.LAYER2C.document.open();

  document.LAYER2B.document.LAYER2C.document.write(dsp);

  document.LAYER2B.document.LAYER2C.document.close();

 } else {

// IE 4~,Netscape 6~

    document.getElementById("LAYER2A").innerHTML=dsp;

 }

}

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません