質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1879閲覧

複数のプルダウン項目を設置して、選択したoptionのコンテンツを表示させたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/05/25 06:01

編集2018/05/25 06:39

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-->

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/05/25 06:27

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
m.ts10806

2018/05/25 06:30

「何のコードが機能しているのかわかりませんでした」とのことですが、ブラウザ開発ツールなどで挙動を追ってみたりはされたのでしょうか?「紐付ける」と言われましてもどのようなデータ体系かは質問者さんしか知りません。データ体系をサンプルデータで結構ですのでご提示願います。
m.ts10806

2018/05/25 06:41

チェックボックスではなくセレクトボックスにされた理由は何でしょうか?
退会済みユーザー

退会済みユーザー

2018/05/25 06:43

@kei344 さん、@mts10806 さんありがとうございました。コードを追加してみました。chromeのデベロッパーツールでも確認してみましたが、コーディングは初心者ですので、何か解説用のサイトがあればと思い投稿させていただきました。よろしくお願いします。
m.ts10806

2018/05/25 06:45

JavaScriptおよびjQueryは全くということでしょうか?2つ目の参考先を見た結果、どのようにされたのでしょう?
m.ts10806

2018/05/25 06:46

というのは2つ目の参考先でやっていることが理解できれば、おそらくやりたいことに応用できるのではと思えるからです。
退会済みユーザー

退会済みユーザー

2018/05/25 06:47

@mts10806さん セレクトボックスにしたのはappleのサイトのようにプルダウン項目をつけたいからです。ですが私に難しいようでしたらチェックボックスでのコーディングを試してみようと思います。
m.ts10806

2018/05/25 06:49

もし2つ目のサイトを参考に反映が難しいようでしたらチェックボックスにしようとしたとしても難しいと思います。レベルとしてはそこまで変わりなくあくまで「見た目が分かりやすくなる」だけなので。
m.ts10806

2018/05/25 06:51

現時点の質問内容からするとコードを全て組んだものを提示することになります。(なぜなら2つ目の参考先が応用できれば実現可能なので) ヒントだけで良いのでしたらヒントだけ提示しますが、そちらはいかがいたしましょう(失礼ながらコードを提示してもおそらく1行1行全て解説しないと理解できなさそうだからです)
m.ts10806

2018/05/25 06:53

ヒント=ロジックの日本語説明 です。参考サイトなどはあくまでJavaScriptの各機能のドキュメントになります。
m.ts10806

2018/05/25 07:26

ひとまずコードと参考記事(機能リファレンスメイン)で回答しました。記事については基本そのまま動かしてみて「なぜ記事の通りに動くんだろう」と各機能のマニュアルやリファレンスを読む癖をつけると、自分の身になって応用もきかせられるようになります。「ちょっと違うからダメ」を続けていてはおそらく何も身につきません。100%合致するようなものはないからです。ブラウザ開発ツールから追うことは可能です。「デバッグ」をキーワードに調べてまずはやってみてください。
guest

回答2

0

ベストアンサー

ひとまず今のhtmlをベースに一部追加しています。
毎回全部回しているのであまり効率は良くありません。
たぶんもっと簡単にできますので、ベースにして色々考えて、やってみてください。
(おそらくhtmlをもう少し整理すればもっと簡潔に実現できます)

管理しやすくなるようにそれぞれの親にidを追加

html

1<div>カラー</div> 2<div id="color"> 3<div data-content="item1">~~製品1のカラー~~</div> 4<div data-content="item2">~~製品2のカラー~~</div> 5<div data-content="item3">~~製品3のカラー~~</div> 6<div data-content="item4">~~製品4のカラー~~</div> 7<div data-content="item5">~~製品5のカラー~~</div> 8</div> 9 10<div>素材</div> 11<div id="materials"> 12<div data-content="item1">~~製品1の素材~~</div> 13<div data-content="item2">~~製品2の素材~~</div> 14<div data-content="item3">~~製品3の素材~~</div> 15<div data-content="item4">~~製品4の素材~~</div> 16<div data-content="item5">~~製品5の素材~~</div> 17</div>

jQueryを利用(3.3.1)
セレクトボックスのchangeを拾って全部非表示にし、
あとは一致するものを表示にするように書いています。

js

1//初期全非表示 2$("#color").children("div").hide(); 3$("#materials").children("div").hide(); 4$(function(){ 5 //初期状態から実行 6 selected(); 7 //選択時に実行 8 $("select").on("change",function(){ 9 $("#color").children("div").hide(); 10 $("#materials").children("div").hide(); 11 selected(); 12 }); 13}); 14 15function selected(){ 16 $("select").each(function(){ 17 var item_selected = $(this).val(); 18 $("#color").children("div").each(function(){ 19 if($(this).data("content") == item_selected){ 20 $(this).show(); 21 } 22 }); 23 $("#materials").children("div").each(function(){ 24 if($(this).data("content") == item_selected){ 25 $(this).show(); 26 } 27 }); 28 }); 29}

jQuery各機能のリファレンスや説明記事

追記:
ちなみにチェックボックスにするように提案したのはyambejpさんがコメントされているように、
同じ値が別々のセレクトボックスに設定されているからです。
重複した情報を選択した場合はどうするのか?を考えなければなりませんから。

あと、セレクトボックスにされるのでしたら「未選択」を入れておいたほうがいいかもしれませんね。
複数選択なのであれば、必ず何かしら選択しなければならないというわけではなく「全て選択しない」というのもありかなと(その時に全て選択したのと同じにするか、単純に未選択で全非表示にするかは仕様次第です)

投稿2018/05/25 07:24

編集2018/05/25 07:35
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/05/25 08:29

@mts10806 さん、@yambejp さんありがとうございます。 お二人のコードを合わせたら表示できました。大変感動しております。 JavaScriptおよびjQueryは全くの素人です。基本コピペで対応しています。 調べたらchromeのデバッグについて書かれているサイトがありましたので参考にさせていただきます。 jQueryの基礎用語も教えていただき、ありがとうございます。 しっかりと学習していきたいと思います。 ただ、もう少し欲を言えば、selectで選択した3点の順番通りにカラーや素材の情報が並ぶといいなと思っております。 実は<div data-content="item1">~<div data-content="item5">はcssで横並びにしています。 例えば、左から製品1・製品5・製品3と選択した場合、 左から製品1の情報・製品3の情報・製品5の情報と並ぶのではなく、 製品1・製品5・製品3の情報の順番で並んでほしいのです。 checkboxに変更してみようとしたのですが、上手くできませんでした。 selectでやってみたい気がしますが、divの並び順を見ても難しいですよね。 情報の後出しをしてしまい、申し訳ありません。 長文ですので改行したく、ここにコメントさせていただきました。 もう少しご教授いただければありがたいです。 よろしくお願い申し上げます。
m.ts10806

2018/05/25 08:36

要件が増えているので 一度質問を解決済みとし、追加でやってみたことを以て新しい質問を立てられては? コメント欄に要件を書かれても他の人の目につきにくいですし、かなり長いやり取りとなっていますし、いったんはうまいことできたようなので。
m.ts10806

2018/05/25 08:37

新しい質問をたてられる場合は関連質問として当質問のURLを質問内容にいれておいてください。
退会済みユーザー

退会済みユーザー

2018/05/25 08:56

ご回答ありがとうございます。そのようにさせていただきます。
yambejp

2018/05/25 09:06

軽微な追加機能なので追記しておきました
m.ts10806

2018/05/25 10:08

yambejpさん 追記ありがとうございます。
guest

0

比較するということはselectが同じものにならないほうがいいのですよね?

javascript

1$(function(){ 2 $('.compare select').on('change',function(){ 3 $('.compare select option').prop("disabled",false); 4 $('.compare div[data-content]').hide(); 5 $('.compare select').each(function(){ 6 $(this).siblings('select').find('option[value="'+$(this).val()+'"]').prop('disabled',true); 7 $('.compare div[data-content="'+$(this).val()+'"]').show(); 8 }); 9 }).eq(0).trigger('change'); 10});

追記

selectで選択した3点の順番通りにカラーや素材の情報が並ぶ

こうです

javascript

1$(function(){ 2 $('.compare select').on('change',function(){ 3 $('.compare select option').prop("disabled",false); 4 $('.compare div[data-content]').hide(); 5 $('.compare select').each(function(){ 6 $(this).siblings('select').find('option[value="'+$(this).val()+'"]').prop('disabled',true); 7 $('.compare div[data-content="'+$(this).val()+'"]').show().each(function(){ 8 $(this).appendTo($(this).parent()); 9 }); 10 }); 11 }).eq(0).trigger('change'); 12});

投稿2018/05/25 07:10

編集2018/05/25 09:05
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/25 07:30

いつもゴリゴリ手続き型で書いてしまうので yambejpさんのコードは大変参考になります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問