Question

想进行通用级联下拉列表，但递归功能较弱

该代码应该以

结尾

做出选择时，一个选择项-衣服或小工具
- 通过Levis / Gucci或LG / Apple进行选择-选择后
- - 选择李维斯（Levis）牛仔裤或夹克或Gucci鞋子或连衣裙的人-做出选择后
- - - 选择Levis牛仔裤尺码或levis夹克尺码或
- - - 选择Gucci鞋子尺码或Gucci礼服尺码

OR

- - 做出选择时，可以选择LG电视或手机，Apple Macbook或iPhone
- - - 选择LG TV尺寸或LG Phone尺寸或
- - - 选择Apple Macbook尺寸或Apple iPhone尺寸

当我真正地递归时，我迷失了思路-也许可以使用过滤器？

我假设一个人可以创建一组路径，然后根据路径显示/隐藏

const selObject = {
  "-- Select Item --": {
    "Clothes": {
      "-- Select brands --": {
        "Levis": {
          "-- Select product --": {
            "Jeans": {
              "-- Select size --": [
                "38",
                "39",
                "40"
              ]
            },
            "Jackets": {
              "-- Select size --": [
                "41",
                "42",
                "43"
              ]
            }
          }
        }, // end Levis
        "Gucci": {
          "-- Select product --": {
            "Shoes": {
              "-- Select size --": [
                "45",
                "50",
                "55"
              ]
            },
            "Dresses": {
              "-- Select size --": [
                "8",
                "9",
                "10"
              ]
            }
          }
        } // end Gucci
      } // end brands  
    }, // End clothes
    "Gadgets": {
      "-- Select brands --": {
        "LG": {
          "-- Select product --": {
            "TVs": {
              "-- Select size --": [
                "38",
                "39",
                "40"
              ]
            },
            "Phones": {
              "-- Select size --": [
                "8",
                "9",
                "10"
              ]
            }
          }
        }, // end Levis
        "Apple": {
          "-- Select product --": {
            "Macbooks": {
              "-- Select size --": [
                "15",
                "17",
                "21"
              ]
            },
            "iPhones": {
              "-- Select size --": [
                "8",
                "9",
                "10"
              ]
            }
          }
        } // end Apple
      } // end brands
    } // end  Gadgets
  } // end items
} // end  

function createSel(obj) {
  Object.keys(obj).forEach(function(item) {
    if (typeof obj[item] == "object") {
      var list = obj[item];
      //console.log(item,typeof list);
      if (typeof list == "object") {
        if (list.length) {
          list.forEach(function(val) {
            console.log('<br/>'+val)
          })  
        }  
        else createSel(list)
      }
    } else {
      console.log("no", obj[item])
    }
  });
}
window.onload = function() {
  createSel(selObject)
}

<form name="myform" id="myForm">
  <div id="selContainer">
  </div>
</form>

Answer 1

在React中执行此操作会更容易。但是，对于普通的JS解决方案，以下可能是您的追求。

基本上我要做的就是使用递归创建组件，并附加事件。

const selObject = {
  "-- Select Item --": {
    "Clothes": {
      "-- Select brands --": {
        "Levis": {
          "-- Select product --": {
            "Jeans": {
              "-- Select size --": [
                "38",
                "39",
                "40"
              ]
            },
            "Jackets": {
              "-- Select size --": [
                "41",
                "42",
                "43"
              ]
            }
          }
        }, // end Levis
        "Gucci": {
          "-- Select product --": {
            "Shoes": {
              "-- Select size --": [
                "45",
                "50",
                "55"
              ]
            },
            "Dresses": {
              "-- Select size --": [
                "8",
                "9",
                "10"
              ]
            }
          }
        } // end Gucci
      } // end brands  
    }, // End clothes
    "Gadgets": {
      "-- Select brands --": {
        "LG": {
          "-- Select product --": {
            "TVs": {
              "-- Select size --": [
                "38",
                "39",
                "40"
              ]
            },
            "Phones": {
              "-- Select size --": [
                "8",
                "9",
                "10"
              ]
            }
          }
        }, // end Levis
        "Apple": {
          "-- Select product --": {
            "Macbooks": {
              "-- Select size --": [
                "15",
                "17",
                "21"
              ]
            },
            "iPhones": {
              "-- Select size --": [
                "8",
                "9",
                "10"
              ]
            }
          }
        } // end Apple
      } // end brands
    } // end  Gadgets
  } // end items
} // end  


function fillDropdown(target, obj) {
  const sel = document.createElement("select");
  const sub = document.createElement("div");
  if (typeof obj !== "object") {
    sub.innerHTML = "<p>Thank you for your selection</p>";
    target.appendChild(sub);
    return;
  }
  target.appendChild(sel);
  target.appendChild(sub);
  const [title, value] = Object.entries(obj)[0];
  //add our title option
  const option1 = document.createElement("option");
  option1.innerText = title;
  sel.appendChild(option1);
  //now add the sub items
  const items = Object.entries(value);
  items.forEach(([k, v]) => {
    const option = document.createElement('option');
    option.innerText = k;
    sel.appendChild(option);
  });
  sel.addEventListener("change", () => {
    sub.innerHTML = "";
    if (sel.selectedIndex > 0) {
      const i = items[sel.selectedIndex - 1];    
      fillDropdown(sub, i[1]);
    }
  }); 
}


window.onload = function() {
  //createSel(selObject);
  fillDropdown(
    document.querySelector('#selContainer'),
    selObject
  );
}

select {
  display: block;
  width: 100%;
  padding: 10px;
}

<form name="myform" id="myForm">
  <div id="selContainer">
  </div>
</form>

Answer 2

您可能还需要考虑以下其他选项：

使用OptGroup：

const selObject = { "-- Select Item --": { Clothes: { "-- Select brands --": { Levis: { "-- Select product --": { Jeans: { "-- Select size --": ["38", "39", "40"] }, Jackets: { "-- Select size --": ["41", "42", "43"] } } }, Gucci: { "-- Select product --": { Shoes: { "-- Select size --": ["45", "50", "55"] }, Dresses: { "-- Select size --": ["8", "9", "10"] } } } } }, Gadgets: { "-- Select brands --": { LG: { "-- Select product --": { TVs: { "-- Select size --": ["38", "39", "40"] }, Phones: { "-- Select size --": ["8", "9", "10"] } } }, Apple: { "-- Select product --": { Macbooks: { "-- Select size --": ["15", "17", "21"] }, iPhones: { "-- Select size --": ["8", "9", "10"] } } } } } } };

const generateDropDown = (obj, indent) => {
  const spaces = Array(indent).fill('&nbsp;').join('');
  
  if (Array.isArray(Object.values(obj)[0])) {
    return Object.values(obj)[0].map(e => "<option>" + spaces + e + "</option>").join('');
  } else {
    return Object.values(obj).map(brand => {
      return Object.keys(brand).map(product => {
        //?
        return `<optgroup label="${spaces + product}"> ${generateDropDown(brand[product], indent + 4)} </optgroup>`;
      }).join('');
    });
  }
};


const list = generateDropDown(selObject, 0).join(' ');

document.querySelector('#dropDown').innerHTML = list;

<select id="dropDown">

</select>

使用ul：（样式更灵活）

const selObject = { "-- Select Item --": { Clothes: { "-- Select brands --": { Levis: { "-- Select product --": { Jeans: { "-- Select size --": ["38", "39", "40"] }, Jackets: { "-- Select size --": ["41", "42", "43"] } } }, Gucci: { "-- Select product --": { Shoes: { "-- Select size --": ["45", "50", "55"] }, Dresses: { "-- Select size --": ["8", "9", "10"] } } } } }, Gadgets: { "-- Select brands --": { LG: { "-- Select product --": { TVs: { "-- Select size --": ["38", "39", "40"] }, Phones: { "-- Select size --": ["8", "9", "10"] } } }, Apple: { "-- Select product --": { Macbooks: { "-- Select size --": ["15", "17", "21"] }, iPhones: { "-- Select size --": ["8", "9", "10"] } } } } } } };

const generateDropDown = (obj, indent) => {  
  const values = Object.values(obj);
  if (Array.isArray(values[0])) {
    return values[0].map(e => `<li class="child">${e} </li>`).join(' ');
  } else {
    return values.map(brand => {
      return Object.keys(brand).map(product => {        
        return `<ul class="parent"> <li class="title">${product}</li> ${generateDropDown(brand[product], indent + 2)} </ul>`;
      }).join(' ');
    });
  }
};

const list = generateDropDown(selObject, 0).join(' ');

document.querySelector('#dropDown').innerHTML = list;

[...document.querySelectorAll('ul,li')].forEach(e => {	
	e.addEventListener('click', ev => {
  	ev.cancelBubble = true;    
    ev.target.classList.toggle('open');
  	// console.log(ev.target.innerText)
    // do some stuff when the element is clicked.    
  })
})

ul{
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.parent, .child{
  padding-left: 15px;  
  display: none;
  cursor: pointer;
}

#dropDown > .parent {
  padding-left: 0;
  display: block;
  
}

.open ~ .parent{
  opacity: 1;
  display: block;
}

.open ~ .child{
  opacity: 1;
  display: block;
}

.title{
  font-weight: bold;
}

.title.open{
  color: red;
}

<div id="dropDown">

</div>

未知深度的普通JS级联选择

2 个答案: