Search code examples
jqueryhtmljsonselectoptgroup

How to convert a html select with optgroup to HTML Table

I am having a select like this,

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

I want to convert this select to a HTML table. how can I convert this?

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

  • I got the answer for this question,

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