人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: makocan
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML JavaScript SELECT コントロール チェックボックス
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● llusall
●23ポイント

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

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>


2 ● kazu1107
●23ポイント

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

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

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

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


3 ● ヨネちゃん
●22ポイント

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>


4 ● aki73ix
●22ポイント

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;

 }

}

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ