使用jQuery將多級UL轉換爲使用optgroup的selectbox

我需要採用多級ul並使用optgroup創建選擇框。我想用jQuery來做這件事。 optgroup標籤將是任何孩子的父母。使用jQuery將多級UL轉換爲使用optgroup的selectbox

我的標記：

<ul> 
    <li><a href="#">Section 1</a> </li> 
    <li><a href="#">Section 2</a> 
     <ul> 
      <li><a href="#">Section 2.1</a></li> 
      <li><a href="#">Section 2.2</a></li> 
      <li><a href="#">Section 2.3</a> </li> 
     </ul> 
    </li> 
    <li><a href="#">Section 3</a></li> 
</ul>

我需要什麼：

<select> 
<option value="#">Section 1</option> 
<optgroup label="Section 2"> 
    <option value="#">Section 2.1</option> 
    <option value="#">Section 2.3</option> 
    <option value="#">Section 2.3</option> 
</optgroup> 
<option value="#">Section 3</option> 
</select>

到目前爲止，我可以創造一個選擇框，但它只尊重一層： http://jsfiddle.net/RyanBrackett/0wp0ypng/

感謝您的幫助

來源

2014-09-02 Ryan Brackett

您的要求是什麼？ – 2014-09-02 18:19:53

剛剛添加了結果代碼。謝謝 – 2014-09-02 18:30:16

// Create the dropdown base 
$("<select />").appendTo(".mob-subpages"); 
var opt = ""; 
$(".wrapper").children('li').each(function(){ 

    if($(this).find('ul').length !== 0){ 
     opt += "<optgroup label="+"'"+$(this).children().html()+"'"+">"; 
     $(this).find('li').each(function(){ 
     opt += "<option>"+$(this).find('a').html()+"</option>"; 
     }); 
     opt += "</optgroup>"; 
    }else{ 
     opt += "<option>"+$(this).children().html()+"</option>"; 
    } 
    console.log($(this).find('ul').length !== 0) 


}); 
console.log(opt) 
$(".mob-subpages select").append(opt)

更新fiddle

此代碼工作正常！

檢查並確認

來源

2014-09-02 18:51:13

Raj，感謝您的快速響應！它有些作品，但似乎需要一些幫助。這是我從代碼得到的結果： – 2014-09-02 19:07:02

嘿我更新了小提琴，。這一個你想要的 – 2014-09-02 19:09:21

檢查並確認 – 2014-09-02 19:10:24

使用jQuery將多級UL轉換爲使用optgroup的selectbox

回答

相關問題