如何轉換一個HTML與OPTGROUP選擇HTML表

Question

我有一個選擇這樣，

<select id="select_id" multiple=""> 
    <optgroup label="Group1"> 
     <option value="option1">OPtion</option> 
     <option value="option2">OPtion</option> 
     <option value="option3">OPtion3</option> 
    </optgroup> 
    <optgroup label="Group2"> 
     <option value="option4">OPtion4</option> 
     <option value="option5">OPtion5</option> 
     <option value="option6">OPtion6</option> 
    </optgroup> 
</select> 

我想這個選擇轉換爲HTML表。我該如何轉換？

<table> 
<tr><td rowspan="4">Group1</td></tr> 
    <tr><td>option1</td></tr> 
    <tr><td>option2</td></tr> 
    <tr><td>option3</td></tr> 
<tr><td rowspan="4">Group2</td></tr> 
    <tr><td>option4</td></tr> 
    <tr><td>option5</td></tr> 
    <tr><td>option6</td></tr> 
</table> 

Answer 1

我得到了答案這個問題，

var maketable ='<table>' 
$('#select_id optgroup').each(function() { 
     var label_count = $(this).find('option').length; 
     var rowsspancount = parseInt(label_count) + 1; 
     maketable = maketable + '<tr><td rowspan="' + rowsspancount + '">' + this.label + '</td></tr>'; 
     $(this).find('option').map(function() { 
     maketable = maketable + '<tr><td>' + $(this).text() + '</td></tr>'; 
    }); 
}); 
maketable = maketable + '</table>' 
alert(maketable); 

Answer 2

你可能想是這樣的：https://github.com/Jxck/html2json

例子：

var json = html2json(document.body.innerHTML); 

如果這個特殊的庫不適合您的口味，一個快速谷歌搜索顯示，有相當多的工具在那裏可以做到這一點。

一般來說，你想檢查已經存在的解決方案，而不是僅僅是自己動手燒烤。如果其他人已經完成了所有的辛苦工作，爲什麼不利用！