如何将带有 optgroup 的 html 选择转换为 HTML 表答案

【问题标题】：How to convert a html select with optgroup to HTML Table如何将带有 optgroup 的 html 选择转换为 HTML 表
【发布时间】：2016-07-23 06:05:54
【问题描述】：

我有这样的选择，

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

【问题讨论】：

我的意图是将此选择数据转换为 html 表格。

标签： jquery html json select optgroup

【解决方案1】：

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

例子：

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

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

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

【讨论】：

你好，我的目的是将这个选择数据转换成一个 html 表格。所以它的接缝对我没有帮助。

【解决方案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 );

【讨论】：