您需要知道使用嵌套optgroup元素的方法是行不通的，因為只會optgroup顯示第一層：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
嘗試使用類似的東西：
const path = (source = {}) => {
// Let the initial string be empty
let returnedString = '';
// Convert the object into an array using key/value pair and then iterate through it
Object.entries(source)
.forEach(([key, value]) => {
if (typeof value === 'object' && value !== null) {
// value is an object, iterate through it
returnedString += `<optgroup label="${key}">${path(value)}</optgroup>`;
} else {
// value should be a string
returnedString += `<option value="${key}">${value}</option>`;
}
});
// Return the string
return returnedString;
}
此外，在操作 DOM 時，建議使用內置方法來操作元素而不是字符串：
// Create the "root" element
// const root = document.createElement('select');
const path = (source = {}, rootElement = undefined) => {
// Define the root element if not an instance of Element
const root= rootElement instanceof Element ? rootElement : document.createElement('select');
// Convert the object into an array using key/value pair and then iterate through it
Object.entries(source)
.forEach(([key, value]) => {
if (typeof value === 'object' && value !== null) { // value is an object, iterate through it
// Create an optgroup element
const optgroup = document.createElement('optgroup');
// Defines the attributes
optgroup.setAttribute('label', key);
// Add "content" inside the optgroup
path(value, optgroup);
// Append the newly created optgroup element to the root
root.appendChild(optgroup);
} else { // value should be a string
// Create an option element
const option = document.createElement('option');
// Defines the attributes
option.setAttribute('value', key);
option.text = value;
// Append the newly created option element to the root
root.appendChild(option);
}
});
// Return the root element
return root;
}
編輯 1：在答案中添加了 DOM 方式
optgroup編輯 2：添加嵌套警告
