ここから本文です

デフォルトでは「sample1」が表示されている状態で、プルダウンメニューの項目をク...

kaz********さん

2020/1/1920:27:50

デフォルトでは「sample1」が表示されている状態で、プルダウンメニューの項目をクリックするとその内容に切り替わるようにしたいと思っています。

どのようなコードを記述すれば良いでしょうか?

ご存知の方いらっしゃいましたら、ご教示ください。よろしくお願いします。

<select name="example">
<option value="sample1">sample1</option>
<option value="sample2">sample2</option>
<option value="sample3">sample3</option>
</select>

<div id="sample1">
sample1の内容
</div>

<div id="sample2">
sample2の内容
</div>

<div id="sample3">
sample3の内容
</div>

閲覧数:
14
回答数:
2
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

cap********さん

2020/1/2023:43:24

style属性を指定することで隠したり再表示させたりしています。

<html>
<head>
<title>デフォルトでは「sample1」が表示されている状態で(q10219020500)</title>
</head>
<body>
<!-- (1) sel1 というidを設定します -->
<select name="example" id="sel1">
<option value="sample1">sample1</option>
<option value="sample2">sample2</option>
<option value="sample3">sample3</option>
</select>

<div id="sample1">
sample1の内容
</div>

<!-- (2) 隠しておきます -->
<div id="sample2" style="display: none;">
sample2の内容
</div>

<!-- (3) 隠しておきます -->
<div id="sample3" style="display: none;">
sample3の内容
</div>

<!-- (4) idがsel1の要素にchangeイベントハンドラを追加します -->
<script type="text/javascript">
// (5) SELECTが変更されたときに、
document.getElementById( "sel1" ).addEventListener( "change",
function ( evt ) {
const htmlSelect = evt.target;
// (6) まず、全てのdivを見えないようにする
Array.prototype.slice.call( htmlSelect.options ).forEach( function ( option ) { document.getElementById( option.value ).style = "display: none;"; } );
// (7) それから選択されたoptionに対応するdivだけ見えるようにする
document.getElementById( evt.target.selectedOptions[0].value ).style = null;
} );

</script>
</body>
</html>

質問した人からのコメント

2020/1/22 23:05:04

ご連絡が遅くなってしまい、大変申し訳ありません。
ご教示いただいたコードを試してみます。
ありがとうございました。

ベストアンサー以外の回答

1〜1件/1件中

プロフィール画像

カテゴリマスター

ybb********さん

2020/1/1923:29:21

kaz********さん

>・・・・クリックするとその内容に切り替わる・・・・・・・・・・

例えば↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
div {
position: absolute;
display: none;
background: #D8DBE2;
width: 100%; height:100px;
}
</style>
</head>
<body>
<select name="example">
<option value="sample1">sample1</option>
<option value="sample2">sample2</option>
<option value="sample3">sample3</option>
</select>

<div id="sample1">
sample1の内容
</div>

<div id="sample2">
sample2の内容
</div>

<div id="sample3">
sample3の内容
</div>

<script>
$('div#sample1' ).fadeIn();
$('select').change(function () {
var val = $('select option:selected').val();
$('div').fadeOut();
$('div#' + val ).fadeIn();
});
</script>
</body>
</html>

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる