选择选项后如何添加另一个选项标签？

Question

我尝试创建一个loockup文件夹，如果使用ul和li，则将扩展我的文件夹和子文件夹。 但是为了明确起见，我决定使用选项标签。 但是现在，我唯一的选择是文件夹的第一个父文件夹。 我想知道如何为之前选择的文件夹中的文件夹添加选项标签？

例如：

<select id="parent-folder">
     <option>folder1</option>
     <option>folder2</option>
<select>
<!--after you select one folder to show the folder inside that I want another option tag-->
 <select id="child-folder">
     <option>folder1</option>
     <option>folder2</option>
     <option>folder3</option>
     <option>folder4</option>
<select>

这是我的JS代码：

function processNewData( respObj, $menuElement, strCurrentPath ) {
    if ( (respObj.subfolders.length > 0) || (respObj.subswfs.length > 0) ) {
        var htmlExpand = 
                ( 'OPTION' === $menuElement.prop("tagName")  ? 
                    '<select class="submenu-item" data-path="' + strCurrentPath + '">' 
                    : '' );

        for( var i = 0; i < respObj.subfolders.length; i++ ) {
            var subfolder = respObj.subfolders[i];

            htmlExpand += 
                '<option ' + 
                    'data-type="path" ' + 
                    'data-path="' + strCurrentPath + '/' + subfolder + '" ' + 
                    'class="folder-item" ' + 
                    'onclick="menuFolderClick(this)"><div>' + 
                        subfolder + 
                '</div></option>';
        }

        for( var i = 0; i < respObj.subswfs.length; i++ ) {
            var subswf = respObj.subswfs[i];

            htmlExpand += 
                '<option ' + 
                    'data-type="swf" ' + 
                    'data-path="' + strCurrentPath + '/' + subswf + '" ' + 
                    'class="swf-item" ' + 
                    'onclick="menuSwfClick(this)"><div>' + 
                        subswf + 
                '</div></option>';
        }
        htmlExpand += ( 'OPTION' === $menuElement.prop("tagName")  ? '</select>' : '' );
        $menuElement.append( htmlExpand );
    }

    if ( 'OPTION' === $menuElement.prop("tagName") ) {
        $menuElement[0].removeAttribute("onclick");
    }
}

这就是我在HTML中所拥有的

<select id="menu"></select>

Answer 1

我刚刚创建了Sample，认为可能会对您有所帮助。 根据您的要求进行更改。

演示

的HTML

<select id="menu">
    <option value="" selected disabled>Select Folder</option>    
    <option value="menu1">Folder 1 </option>
    <option value="menu2">Folder 2 </option>    
</select>

<select id="menu1">
    <option value="sub1">Sub Folder 1.1 </option>
    <option value="sub2">Sub Folder 1.2 </option>
    <option value="sub3">Sub Folder 1.3 </option>
</select>

<select id="menu2">
    <option value="sub1">Sub Folder 2.1 </option>
    <option value="sub2">Sub Folder 2.2 </option>
    <option value="sub3">Sub Folder 2.3 </option>
</select>

JS / jQuery

$("#menu1, #menu2").hide();
$('select').on('change', function() {
    var x = this.value
    $("#menu1, #menu2").hide();
    $("#" + x).fadeIn();
});