如何基於嵌套的ul列表創建嵌套的選擇菜單？

Question

我想基於嵌套的HTML ul列表創建“嵌套”選擇菜單。 例如，向用戶顯示類別的選擇菜單，然后選擇該根類別的選項將打開另一個帶有子類別的選擇菜單。 （如果子類別包含子類別，則循環繼續。我希望能夠根據ul列表打開任意數量的子類別子菜單。）

例如，在頁面上給出以下代碼：

<ul id="select-menu-layout" style="display: none">
  <li>A option
    <ul>
      <li>a1 name</li>
      <li>a2 name</li>
      <li>a3 name</li>
    </ul>
  </li>
  <li>B option
    <ul>
      <li>b1 name</li>
      <li>b2 name
        <ul>
          <li>b21 choice</li>
          <li>b22 choice</li>
          <li>b23 choice</li>
        </ul>
      </li>
      <li>b3 name</li>
    </ul>
  </li>
  <li>C name</li>
</ul>

<!-- select menus will be shown in the container below -->
<div class="select-menu-container"></div>

在上面的示例中，最初將顯示一個選擇菜單：

<select>
  <option>A option</option>
  <option>B option</option>
  <option>C option</option>
</select>

然后選擇“ B選項”將顯示第二個選擇菜單（基於上面的HTML列表）：

<select>
  <option>b1 name</option>
  <option>b2 name</option>
  <option>b3 name</option>
</select>

選擇“ b2名稱”將顯示第三個選擇菜單：

<select>
  <option>b21 choice</option>
  <option>b22 choice</option>
  <option>b23 choice</option>
</select>

我假設您需要javascript / jQuery來做到這一點？ 我在考慮這段代碼（盡管我可能很錯）：

<div class="select-menu-container"></div>

<script>
function addSelectMenu(node){
  $(".select-menu-container").append("<select style='display: none'></select>")
  node.each(function(){
    var name = $(this).val()
     $("select:last").append("<option>" + name + "</option>")
  })
}

$("ul").each(function(){
  addSelectMenu($(this))
})
</script>

有任何想法嗎？

Answer 1

為了在具有類似嵌套可折疊列表的行為的一系列選擇元素中轉換ul / li列表，可能的解決方案可以基於遞歸方法。

必須將每個選擇鏈接到上一個選擇，以切換可見性。

片段：

 function createSelectFromUl(ele, parentLink) { var txtParentNode = parentLink || ''; var options = ele.map(function (idx, ele) { var txt = $(ele).contents().filter(function (idx, ele) { if (ele.nodeType == Node.TEXT_NODE) { return true; } }).text().trim(); return $('<option/>', {text: txt}) }); if (ele.children('ul').length == 0) { return [$('<select/>', {parentNode: txtParentNode}).append(options.toArray())]; } var retVal = [$('<select/>', {parentNode: txtParentNode}).append(options.toArray())]; ele.children('ul').each(function (idx, ele) { txtParentNode = $(ele.parentNode).contents().filter(function (idx, ele) { if (ele.nodeType == Node.TEXT_NODE) { return true; } }).text().trim(); var childSelects = createSelectFromUl($(ele).children('li'), txtParentNode); $.merge(retVal, childSelects); }); return retVal; } $(function () { var seleEles = createSelectFromUl($('#select-menu-layout > li')); $('.select-menu-container').append(seleEles); $('.select-menu-container select:gt(0)').hide(); $('.select-menu-container select').on('change', function (e) { var txtParentNode = $(this).val(); $(this).nextAll().hide(); $('.select-menu-container select[parentNode="' + txtParentNode + '"]').toggle(); }).trigger('change'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="select-menu-layout" style="display: none"> <li>A option <ul> <li>a1 name</li> <li>a2 name</li> <li>a3 name</li> </ul> </li> <li>B option <ul> <li>b1 name</li> <li>b2 name <ul> <li>b21 choice</li> <li>b22 choice</li> <li>b23 choice</li> </ul> </li> <li>b3 name</li> </ul> </li> <li>C name</li> </ul> <div class="select-menu-container"></div>