連想配列から連動するセレクトボックスを作成したい

Question

前提・実現したいこと

下記のような連想配列を使って分岐・連動するセレクトボックスを作りたいと思っております。

■一つ前の選んだ項目で絞ったセレクトボックスを追加したい
例えば、りんごが選択された時に、次のセレクトボックスの中身は「りんご」の中のplace一覧が表示され、
その次のセレクトボックスが「りんご」-「place（例えば青森県産）」に紐づくset - toyを表示させるイメージです。

商品の情報は紐付けしておきたいので、（例えば　「りんご - 青森産 - ２パックセット - おもちゃつき」　など）
セレクトボックスが5個くらいになった時に連想配列の階層がとんでもなく深くなってしまうのですが、
情報が多い場合この配列の書き方・使い方であっているのでしょうか？？
別なやりかたの方が実装・運用が簡単という方法があればご教示時ください。

２つ目までは連動できるのですが、どうしても3つ目以上ができません。
３つ目以降を上の階層に紐づくセレクトボックスの作り方をご教示いただければと思います。

<select id="selName" onchange="selParts(this);"></select>
<select id="sel2"></select>
<select id="sel3"></select>
<select id="sel4"></select>
<select id="sel5"></select>

現状の配列

let data = [{
            cd: "1",
            name: "りんご",
            place:[ 
                {cd: "1",place: "青森県産",
                set:[{cd:1,set:"2パックセット",
                      toy:[{cd:1,toy:"りんごのおもちゃ",},
                          {cd:1,toy:"梨のおもちゃ",},]
                     },
                     {cd:1,set:"3パックセット",
                      toy:[{cd:1,toy:"りんごのおもちゃ",},
                          {cd:1,toy:"梨のおもちゃ",},]
                     },
                 ]
                }, 
                {cd: "2",place: "長野県産",
                    set:[{cd:1,set:"特別セット",
                      toy:[{cd:1,toy:"りんごのおもちゃ",},
                          {cd:2,toy:"梨のおもちゃ",},]
                     },
                     {cd:2,set:"激安セット",
                      toy:[{cd:1,toy:"りんごのおもちゃ",},
                          {cd:2,toy:"梨のおもちゃ",},]
                     },
                 ]}, 
                {cd: "3",place: "山形産",
                 set:[{cd:1,set:"2パック特別セット",
                      toy:[{cd:1,toy:"りんごのおもちゃ",},
                          {cd:2,toy:"梨のおもちゃ",},]
                     },
                     {cd:1,set:"3パック激安セット",
                      toy:[{cd:1,toy:"りんごのおもちゃ",},
                          {cd:2,toy:"梨のおもちゃ",},]
                     },
                 ]}, 
            ], 
        },
        {
            cd: "2",
            name: "バナナ",
            place:[ 
                {cd: "1",place: "国産",
                set:[{cd:1,set:"2パックセット",
                      toy:[{cd:1,toy:"バナナのおもちゃ",},
                          {cd:1,toy:"おもちゃなし",},]
                     },
                     {cd:1,set:"3パックセット",
                      toy:[{cd:1,toy:"パイナップルのおもちゃ",},
                          {cd:1,toy:"ハンカチ",},]
                     },
                 ]
                }, 
                {cd: "2",place: "インドネシア産",
                    set:[{cd:1,set:"特別セット",
                      toy:[{cd:1,toy:"タオル",},
                          {cd:2,toy:"ペン",},]
                     },
                     {cd:2,set:"激安セット",
                      toy:[{cd:1,toy:"シール",},
                          {cd:2,toy:"なし",},]
                     },
                 ]}, 
                {cd: "3",place: "フィリピン産",
                 set:[{cd:1,set:"2パック特別セット",
                      toy:[{cd:1,toy:"シール",},
                          {cd:2,toy:"フィリピンのおもちゃ",},]
                     },
                     {cd:1,set:"3パック激安セット",
                      toy:[{cd:1,toy:"タオル",},
                          {cd:2,toy:"シール",},]
                     },
                 ]}, 
            ], 
        },
    ]

javascriptコード

for (var i = 0; i < data.length; i++) {
    let op = document.createElement("option");
    op.value = data[i].cd;
    op.appendChild(document.createTextNode(data[i].name));
    document.getElementById("selName").appendChild(op);
}
    

    
function selParts(obj) {
    var targetArr;
    if (obj.value == "1") {
        targetArr = data[0].place;
    } else if (obj.value == "2") {
        targetArr = data[1].place;;
    } else {
        targetArr = new Array();
    }
    var selObj = document.getElementById('sel2');
    while (selObj.lastChild) {
        selObj.removeChild(selObj.lastChild);
    }
    for (var i = 0; i < targetArr.length; i++) {
        let op = document.createElement("option");
        op.value = targetArr[i].place;
        op.text = targetArr[i].place;
        selObj.appendChild(op);
    }
}

Comments

[yambejp]

りんごとringoplaceが紐付いてないので、最初からdataに
りんごのデータにplaceというデータを埋め込むほうがよいのでは？

[nakamu-]

すいません。知識不足で申し訳ないのですが、おっしゃっているのは{ name: "りんご", place: "青森県産"}というようにするということでしょうか？？
その場合の、nameの値が「りんご」のplaceだけを抽出する方法を教えていただけないでしょうか？

[yambejp]

こんな感じということです
let data = [{
cd: "1",
name: "りんご",
place:[
{cd: "1",place: "青森県産",},
{cd: "2",place: "長野県産",},
{cd: "3",place: "山形産",},
],
},
{・・・

[yambejp]

appleplaceやbananaplaceなど名前に依存するような変数を果物が増えるたびに
作っていくのは非効率で管理もしづらいでしょう

[nakamu-]

ありがとうございます！！！！
教えていただいたものにすると、「■セレクトボックス内で重複している項目は除外したい」という要望もあわせて解決できました！！！！

Answer 1

回答が付かないようなので。

データの構造が私の好みではありません。
階層が深くなるとキーとなる名前に統一性が無いからです。
なので俺様仕様です。エラーチェックも殆んどしていません。
SELECT要素群の最後の値を見れば選ばれた経緯も理解できるでしょう！

青森県産の「サンふじ」が、大好きです。もう一度言っておきます！「サンふじ」が、大好きです。

<body>
<p>
  <select id="selName"></select>
  <select id="sel2"></select>
  <select id="sel3"></select>
  <select id="sel4"></select>
<p>
  <select class="p"></select>
  <select class="p"></select>

<script>

class O {
  constructor ([text, value = text, ds = false, s = false], group = '') {
    this.option = new Option (text, value, ds, s);
    this.group = group;
  }

  static create (...args) { return new this (...args)} 
}


class S {
  constructor (selects = [ ], data = [ ], first) {
    this.selects = [...selects];
    this.data = data;
    this.first = first;

    let s = selects[0], d = data[0];
    this.replaceSelect (s, d);
    this.replaceAfter (s)
  }

  replaceSelect (sel, opts = []) {
    sel.length = 0;
    if (this.first)
      opts = [this.first, ...opts];
    opts.forEach (o=> sel.appendChild (o.option.cloneNode (true)));
  }

  replaceAfter (e) {
    if (! this.selects.includes (e)) return;
    let
      val = e.value,
      no = this.selects.indexOf (e) + 1,
      sel = this.selects[no];

    console.log (this.selects.map (s=> s.value).join (', '));//値の確認

    if (! sel) return;
    this.replaceSelect (sel, this.data[no].filter (op=> op.group == val));
    this.replaceAfter (sel);

  }

  handleEvent ({target: e}) {
    let n = this.selects.indexOf (e);
    if (-1 < n)
      this.replaceAfter (e);
  }

  static create (selects, data, first = new O(['--', '', true]), root = document) {
    if (selects.length != data.length)
      throw new Error ('長さが合わない');
    let obj = new this (selects, data, first);
    root.addEventListener ('change', obj, false);
    return obj;
  }
}

let
  o = O.create.bind(O),//呼び出しを省略するため
  data0 = [
    o(["リンゴ", 1]),//[text, value, defaultSelected, selected]
    o(["バナナ", 2])
  ],
  data1 = [
    o(["青森県産",10], 1),
    o(["長野県産",11], 1),
    o(["山形産",12], 1),

    o(["国産",20], 2),
    o(["インドネシア産",21], 2),
    o(["フィリピン産",22], 2),
  ],
  data2 = [
    o(["2パックセット", 100], 10),
    o(["3パックセット", 101], 10),

    o(["特別セット", 110], 11),
    o(["激安セット", 111], 11),

    o(["2パック特別セット", 120], 12),
    o(["3パック激安セット", 121], 12),

    o(["2パックセット", 200], 20),
    o(["3パックセット", 201], 20),

    o(["特別セット", 210], 21),
    o(["激安セット", 211], 21),

    o(["2パック特別セット", 220], 22),
    o(["3パック激安セット", 221], 22),
  ],

  data3 = [
    o(["りんごのおもちゃ", 1000], 100),
    o(["梨のおもちゃ", 1001], 100),

    o(["りんごのおもちゃ", 1010], 101),
    o(["梨のおもちゃ", 1011], 101),

    o(["りんごのおもちゃ", 1100], 110),
    o(["梨のおもちゃ", 1101], 110),

    o(["りんごのおもちゃ", 1200], 120),
    o(["梨のおもちゃ", 1201], 120),

    o(["りんごのおもちゃ", 1210], 121),
    o(["梨のおもちゃ", 1211], 121),

    o(["バナナのおもちゃ", 2000], 200),
    o(["おもちゃなし", 2001], 200),

    o(["タオル", 2100], 210),
    o(["ペン", 2101], 210),

    o(["シール", 2110], 211),
    o(["なし", 2111], 211),

    o(["シール", 2200], 220),
    o(["フィリピンのおもちゃ", 2201], 220),

    o(["タオル", 2210], 221),
    o(["シール", 2211], 221),
  ]

S.create (document.querySelectorAll ('select[id^="sel"]'), [data0, data1, data2, data3]);

//__________

let
  d0 = [o(['intel']), o(['amd'])],
  d1 = [o(['win10'], 'intel'), o(['linux'], 'intel'), o(['win10'], 'amd'), o(['linux'], 'amd') ];

S.create (document.querySelectorAll ('.p'), [d0, d1], new O (["選んでね",""]));

</script>

Comments

[nakamu-]

ありがとうございます！！！
「サンふじ」食べてみようと思います！