如何将带有 optgroup 的 html select 转换为 HTML Table

Question

我有一个这样的 select，

<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>

我想将此 select 转换为 HTML table。我该如何转换它？

<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

您可能想要这样的东西：https://github.com/Jxck/html2json

示例：

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

如果这个特定的库不适合您的口味，快速 google 搜索会发现有很多工具可以做到这一点。

一般来说，您希望检查已经存在的解决方案，而不是仅仅自制自己的解决方案。如果其他人已经完成了所有艰苦的工作，为什么不利用呢！

Answer 2

我得到了这个问题的答案，

 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 );

如何将带有 optgroup 的 html select 转换为 HTML Table

How to convert a html select with optgroup to HTML Table

html

jquery

select

json

optgroup