- ベストアンサー
HTML 同じ項目のドロップダウンを複数個所に
htmlを勉強中の初心者です。 同じ項目のドロップダウンメニューを複数個所に作成することを考えています。 同じ項目の<select>タグを複数個所に張り付けることで、目的のことができました。しかし、ドロップダウンの項目（内容、項目数）を変更することがあり、その都度全個所を変更することを避け、項目のデータは一つにしておきたいと考えています。 このようなことを行うことは可能でしょうか？ ご存じの方教えていただけないでしょうか。
- pikopiko29
- お礼率53% (48/90)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<!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>
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
最初の質問とは違うようです。再質問なさることをお勧めします。 (受け売りですが）良き質問には、良き回答が得られます。 今のあなたの質問の仕方はよろしくない。
補足
コメントありがとうございます。 大変失礼しました。 再質問いたします。
お礼
ありがとうございました。 やりたいことができました。 ソースコードについても勉強していきたいと思います。
補足
ご回答ありがとうございます。 内容を理解するにはまだまだ勉強が必要ですが、やりたいことができました。実際のソースにも組み込むことができました。 ありがとうございました。 可能であればあと一点教えていただけないでしょうか？ ドロップダウンで選択した項目に基づいた、文字列および数字を得たいのですが、どのようにすればよいでしょうか。がんばってみましたが、できませんでした。 ドロップダウン 文字列 数字 abc abc 123 def def 456 ABC ABC 789 abcを選択すると「abc」「123」が隣のセルにそれぞれ表示されるような形を考えています。 お手数をおかけしますが、可能であれば教えていただけないでしょうか？