3つのプルダウン項目を設置して、選択したら紐づけられたコンテンツを表示させたいです。
イメージとしてはappleの製品比較サイトです。
https://www.apple.com/jp/iphone/compare/
appleのコードを見たのですが、何のコードが機能しているのかわかりませんでした。
このサイト
https://www.web-officer.com/jquery/how-to-switch-between-display-and-non-display-by-the-selected-value-of-the-select-tag-in-jquery.html
も見たのですが、プルダウン項目を3つつけたところ、機能しませんでした。
出来ればシンプルに作りたいです。
参考にできるサイトを探しています。ご教授願います。
恥ずかしながら<form>しか書いていません。
例えば、製品1と製品2と製品3を選択したら
カラーと素材のitem1~3が表示され、item4,5が非表示になるようにしたいです。
<div class="compare"> <form> <select> <option value="item1" selected>製品1</option> <option value="item2">製品2</option> <option value="item3">製品3</option> <option value="item4">製品4</option> <option value="item5">製品5</option> </select> <select> <option value="item1">製品1</option> <option value="item2" selected>製品2</option> <option value="item3">製品3</option> <option value="item4">製品4</option> <option value="item5">製品5</option> </select> <select> <option value="item1">製品1</option> <option value="item2">製品2</option> <option value="item3" selected>製品3</option> <option value="item4">製品4</option> <option value="item5">製品5</option> </select> </form> <div>カラー</div> <div> <div data-content="item1">~~製品1のカラー~~</div> <div data-content="item2">~~製品2のカラー~~</div> <div data-content="item3">~~製品3のカラー~~</div> <div data-content="item4">~~製品4のカラー~~</div> <div data-content="item5">~~製品5のカラー~~</div> </div> <div>素材</div> <div> <div data-content="item1">~~製品1の素材~~</div> <div data-content="item2">~~製品2の素材~~</div> <div data-content="item3">~~製品3の素材~~</div> <div data-content="item4">~~製品4の素材~~</div> <div data-content="item5">~~製品5の素材~~</div> </div> </div><!--compare end-->
回答2件
あなたの回答
tips
プレビュー