• ベストアンサー

HTML 同じ項目のドロップダウンを複数個所に

htmlを勉強中の初心者です。 同じ項目のドロップダウンメニューを複数個所に作成することを考えています。 同じ項目の<select>タグを複数個所に張り付けることで、目的のことができました。しかし、ドロップダウンの項目(内容、項目数)を変更することがあり、その都度全個所を変更することを避け、項目のデータは一つにしておきたいと考えています。 このようなことを行うことは可能でしょうか? ご存じの方教えていただけないでしょうか。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

<!DOCTYPE hrml> <meta charset="utf-8"> <title></title> <style></style> <body> <ol>  <li><select id="A"></select>  <li><select id="B"></select>  <li><select id="C"></select> <ol> <script> function isObject (arg) {  return arg !== null && 'object' === typeof arg && 'Object' === arg.constructor.name; } function createOptions (...args) {  const   vaild = ['string', 'number'],   fgm = document.createDocumentFragment ();  for (let arg of args) {   if (null === arg)    continue;   let parent = fgm;   //オブジェクト型でラベルがあれば optgroup と見なす   if (isObject (arg)) {    let { label, options } = arg;    if (label) {     let optgroup = document.createElement ('optgroup');     optgroup.label = label;     parent = parent.appendChild (optgroup);    }    arg = Array.isArray (options) ? options: [options];   }   else    arg = [arg];   //配列ならば   parent.append (...arg.map (a=> Array.isArray (a) ? new Option (...a): new Option (a, a)));  }  return fgm; } //_________________ let a = createOptions ("選択して下さい", ["abc", 1], ["def",2], {label:"ABC", options:[["ghi",3],["jkl",4]]}); let s = [A, document.getElementById ('B'), document.querySelector ('#C')]; s.forEach (e=> e.appendChild (a.cloneNode (true))); </script>

pikopiko29
質問者

お礼

ありがとうございました。 やりたいことができました。 ソースコードについても勉強していきたいと思います。

pikopiko29
質問者

補足

ご回答ありがとうございます。 内容を理解するにはまだまだ勉強が必要ですが、やりたいことができました。実際のソースにも組み込むことができました。 ありがとうございました。 可能であればあと一点教えていただけないでしょうか? ドロップダウンで選択した項目に基づいた、文字列および数字を得たいのですが、どのようにすればよいでしょうか。がんばってみましたが、できませんでした。 ドロップダウン 文字列 数字 abc abc 123 def def 456 ABC ABC 789 abcを選択すると「abc」「123」が隣のセルにそれぞれ表示されるような形を考えています。 お手数をおかけしますが、可能であれば教えていただけないでしょうか?

その他の回答 (1)

回答No.2

最初の質問とは違うようです。再質問なさることをお勧めします。 (受け売りですが)良き質問には、良き回答が得られます。 今のあなたの質問の仕方はよろしくない。

pikopiko29
質問者

補足

コメントありがとうございます。 大変失礼しました。 再質問いたします。

関連するQ&A

  • エクセルのドロップダウンメニューについて質問です

    エクセル2010で表を作る練習をしています。 ドロップダウンメニューの事なのですが、 例えば私は練習として、今所持している本のリストを作っています。(画像参照) ドロップダウンメニューの作り方は検索して理解できました。 ですが、一通り入力した後この方法で登録すると、 ドロップダウン項目に同じ文章が複数入ってしまいます。 これを防ぐためにはどうすればいいのでしょうか? また、1行目にドロップダウンメニュー?を設置して、 並び変えるにはどうすればいいのでしょうか? (「データ→並び変え」ではありません)

  • ドロップダウンの項目からのリンク

    HP作成にホームページビルダー2000を使用してます。ドロップダウンをクリックすると項目がいくつかでますよね、その中の項目をクリックすると指定したページにリンクさせたいのですが、このソフトで出来ますか? 可能でしたら設定の仕方を教えて下さい。 また、ソースはあまりいじれる方ではないのですが、ビルダーで出来ないようでしたらソースからのやり方を教えて下さい。御願いします。

    • 締切済み
    • CSS
  • ドロップダウンメニューのメニュー項目の外部管理方法

    お世話になります。 http://jsajax.com/DropDownMenuArticle286.aspx 上記のサイトにあるドロップダウンメニューのサンプルはトップメニューは<li>タグ、ドロップダウンメニューは<div>タグで宣言するようになっているのですが、今回はサーバーがPHPとSSIが使えないのでincludeができないのです、そこでcssの外部ファイルにメニューデータを格納してそれを渡したいと思っているのですがそういった方法ってありませんか?

  • CSSのドロップダウンメニューが見出しで切れる

    CSSでドロップダウンメニューを作りました。 ページの上部に横並びの状態です。 メニューを押すと下に4項目程度のリストが下がってきます。 今まで本文の見出しには<h1>タグを使用せず画像でのみで作っており、リストには影響がありませんでした。 <h1>を使用しCSSで装飾したところ、ドロップダウンメニューの<h1>にかぶる部分が切れてしまいます。 解決策はありますでしょうか。 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • ドロップダウンメニューについて

    javascriptのドロップダウンメニューの作成について質問させてください。 現在、あるサイトでグローバルナビゲーションにドロップダウンメニューを実装しようとしているのですが、壁にあたってしまいました。 ↓参考サイト http://jsajax.com/EditRunDemo.aspx こういったドロップダウンメニューなのですが、これを例にあげさせてもらうと、例えばこのメニューのDownloadというページをクリックしてDownloadページに自分がいる時はDownloadのドロップダウンメニューを"出さない"ということがやりたいのです。 自分なりに色々とやってはみたものの、javascriptの経験が浅いので正直なところよくわからないのが現状です。 どなたかこのような事例のサンプルを紹介しているサイトをお知りの方、もしくは解決法をご教授いただければ幸いです。 そこまで至らなくてもどのような手法を取ればできそうかということだけでも良いのでご意見をください。 よろしくお願いします。

  • 複数の条件を組み合わせたドロップダウンリストの作成

    エクセル2007で複数の条件を組み合わせたドロップダウンリストを作成したいです。 ********************************************** sheet1 sheet2 sheet3 (作業内容) (担当者) (場所) 1 清掃 佐藤 会議室 2 清掃 田中 トイレ 3 清掃 山本 ROOM1 4 清掃 酒井 ROOM2 5 除草 遠藤 中庭 6 除草 中井 正面玄関 7 窓拭 青木 ロビー 8 窓拭 同上 会議室 9 窓拭 清水 ROOM1 10窓拭 同上 ROOM2 *********************************************** 上記の内容を使い、sheet4で 『それぞれの担当が、どこの場所を、何時間作業をしたかのか』 を記入するリストを作成するとします。 sheet1には作業内容、sheet2にはその作業に対する担当者 sheet3には担当者が受け持つ場所がそれぞれ記載してありますが 1~4(清掃グル-プ)だけは、どの担当者も 「会議室・トイレ・ROOM1・ROOM2」を受け持つことになっています。 実際記入するsheet4には、以下のドロップダウンを作成したいです。 セルA1.作業内容のドロップダウン セルA2.作業内容に対する担当者名のドロップダウン セルA3.担当者に対する場所のドロップダウン ※ただし、1~4に関しては、どの担当者に対しても sheet3の1~4すべての場所を表示させるようにしたい それぞれ名前の定義で名前をつけ、入力規則にINDIRECTを使い A1・A2のドロップダウンまでは作成することができましたが A3のドロップダウンは、どのようにつくればよいのかわかりませんでした。 5~10の担当者に対するドロップダウンと、1~4の条件を組み合わせて ドロップダウンをつくることは可能でしょうか。 すべてに名前の定義をつけてつくることは可能なのですが、実際作ろうとしているリストは、1~4の担当者部分がかなりの数になっている為、なるべく同じ項目をたくさん入力せずにできる方法を探しています。 Sheet1~sheet3の項目は、どのsheetに記載でも大丈夫です。 入力用のシートになるsheet4だけは別にしたいです。 どうぞ宜しくお願い致します。

  • エクセルのドロップダウンについて

    エクセル初心者です。よろしくお願いします ドロップダウンリストを連動させる?2つ使う方法について教えてください。 例えば、ある株式 A、B、C・・・があり、その月の月間の 始値、高値、安値、終値の4つの項目があるとします。 そこでそのうちの2つの項目を比較(ここでは単純に引き算)の結果を出す列も用意します。  ここでドロップダウンリストで「どの株式」→そのうちの 「どの値段」と「どの値段」 という風にカギかっこ部分をドロップダウンリストにしたい場合どうすればいいのか分かりません。   たとえば、株式のところで、トヨタ― 本田0 松っ下 の株式をえらんで、 次のドロップダウンで選べる項目は4つ 選んだら それに対応した値段が数か月分でてくるようにしたいんです。     松|下 ←(ドロップ) 高値  安値 ←(ドロップ) 35   21 62   13 87   64 どうかよろしくお願いします

  • ドロップダウンメニュー。

    個人でHPを運営しているのですが、 この度、フレーム機能とドロップダウンメニューを使用してページを製作しました。 ところが、メニューから項目を選んでクリックしてちゃんと表示されるのですが、クリックしても何も表示されない部分(メニューの中の最初の表示部分や、htmなど設定されていない部分)も何故か、何にもない真っ白なページが表示されてしまいます。 ドロップダウンメニューのソースはサンプルから頂いてきて、自分なりに何とか形になったのですが、上記のトラブルを解消するほどの知識がありません。 何卒、ご教授お願いいたします。 http://www003.upp.so-net.ne.jp/tochio-cinema/cinema_review.htm の右上にあるドロップダウンメニューです。 メニューの中の LAST UPDATEと、その下の6/26をクリックすると、下のフレームが真っ白になってしまいます。

    • ベストアンサー
    • HTML
  • 2段階のドロップダウンリストについて

    2列に渡って、2段階のドロップダウンリストを作成します。 1列目である項目をリストから選び、2列目に移ったら1列目で選んだ 項目に匹敵する項目のリストから選べるようにしたいと思っています。 名前の定義とINDIRECTを使って作成している所です。項目には頭に数字 をふりたいのですが、名前の定義は数字が使えず、丸数字を使おうとも 思ったのですが21個では足りません。アルファベットも数が足りませ ん。 何か良い方法があったらヨロシクお願い致します。

  • タブレットのドロップダウンメニューについて

    会社のWebの管理をしていますが、5年前に作ったサイトはJavaScriptを使ってドロップダウンにしました。 しかしタブレットではドロップダウンメニューが開かずページの遷移ができません。 メニューを修正してタブレットやスマホでもリンク先のページに遷移させるのにはどうしたら良いか教えて下さい。 商品のところはドロップダウンで20個程表示されます。 Webについてはほぼ素人でHTMLとCSSは独学で勉強し、JavaScriptは本やサイトのサンプルデータを使わせていただいていて、内容についてはあまり理解していません。 タブレットやスマホではそもそもドロップダウンメニューが使えないようなのですが。 サイトで検索しましたが、今一参考にできそうなサイトにたどりつけませんでした。 アドバイスよろしくお願いします。

専門家に質問してみよう