nested optgroup experiment w/ bootstrap + select2

This is a simple test to see if SELECT lists in chrome support nested optgroups. Answer is "no", but I had expected/hoped dom structure would be intact. Instead, chrome rewrites the dom to appear as though nested optgroup were declared immediately following the parent optgroup. For this reason, the select2 widget also can't handle nested optgroups, as it builds it's structure off by trolling the select dom node.

by Sree K

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<div class="container">
<form action="" method="post">

<h1>testing form controls</h1>
<div class="row">
    <div class="span4">span4</div>
    <div class="span8">span8</div>
</div>

<legend>some controls</legend>
<label for="txt1">Text box</label>
<input id="txt1" type="text" placeholder="type something" />
<span class="help-block">Example block-level help text</span>
<label class="checkbox">
    <input type="checkbox">Check me out
</label>
    <legend>selects</legend>
    <label for="sel1">Select List #1 (regular)</label>
    <select id="sel1" name="sel1">
        <option>option 1</option>
        <option>option 2</option>
    </select>
    
    <label for="sel2">Select List #2 (select2 widget)</label>
    <select id="sel2" name="sel2">
        <option>option 1</option>
        <option>option 2</option>
    </select>
  
    <label>Select List #3 (w/ optgroups)</label>
    <select id="sel3" name="sel3">
        <optgroup label="group1">
            <option>option 1</option>
            <option>option 2</option>
        </optgroup>
        <optgroup label="group2">
            <option>option 3</option>
            <option>option 4</option>
        </optgroup>
    </select>

    <label>Select List #4 (w/ nested optgroups)</label>
    <select id="sel4" name="sel4" class="input-large">
        <optgroup label="group1">
            <option>option 1</option>
            <option>option 2</option>
            <optgroup id="optLevel2" label="group1a">
                <option>option 3a</option>
                <option>option 3b</option>
            </optgroup>
        </optgroup>
        <optgroup label="group2">
            <option>option 3</option>
            <option>option 4</option>
        </optgroup>
    </select>

    <label id="lblSel5">Select List #5 optgroup...

JavaScript

let data = [
  {
    "id": "",
    "text": ""
  },
  {
    "text": "Assets",
    "children": [
      {
        "text": "Current Assets",
        "children": [
          {
            "text": "Sundary Debtors",
            "children": [
              {
                "id": "8",
                "text": "ABC Customer"
              },
              {
                "id": "7",
                "text": "Auto coded customer"
              },
              {
                "id": "2",
                "text": "Customer 3"
              },
              {
                "id": "1",
                "text": "D'coze Technologies Pvt. Ltd."
              },
              {
                "id": "6",
                "text": "My customer"
              },
              {
                "id": "3",
                "text": "Test Customer"
              },
              {
                "id": "5",
                "text": "WNLPL"
              },
              {
                "id": "4",
                "text": "XYZ Customer"
              }
            ]
          },
          {
            "text": "Bank Accounts",
            "children": [
              {
                "id": "91",
                "text": "A new bank"
              },
              {
                "id": "28",
                "text": "State Bank of India"
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "text": "Liabilities",
    "children": [
      {
        "text": "Current Liabilities",
        "children": [
          {
            "text": "Sundary Creditors",
            "children": [
              {
                "id": "90",
                "text": "Shubham"
              },
              {
                "id": "20",
                "text": "Test 2"
              },
              {
                "id": "19",
                "text": "Test Vendor"
              },
              {
                "id": "96",
                "text": "Test Vendor 1"
              }
         ...