ネストされた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> 

、1が最初に示したメニューが選択されます：

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

は「Bオプション」を選択すると、その後、（上記のHTMLリストに基づいて）この第2の選択メニューが表示されます：

「B2名前は」その後、この第三の選択メニューが表示されます選択10

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

：

<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

ネストされた折りたたみリストのような動作を持つ一連のselect要素の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>