How to execute nested objects for jquery plugins?

Question

I tried to learn to make a simple jquery plugin.

This is my code:

$.fn.TestPlugin = function( options ) {
    var setting = $.extend({
        "image" : [ "image1.jpg", "image2.jpg", "image2.jpg"],
        "select": [
                    {
                        "Label 1": ["opt 1", "opt 2", "opt 3"],
                        "Label 2": ["opt 4", "opt 5", "opt 6", "opt 7"]
                    }
                  ]
    }, options );

    return this.each(function( index ){
        $( this ).wrap( "<div class='container' id='container-"+ [index+1] +"'></div>" );       

        //select
        var $select = "<select>";
            //loop for select

            $select += "</select>";
        $( $select ).appendTo( "#container-"+ [index+1] +"" );
    });
};

How can I get results like this:

<select>
    <optgroup label="Label 1">
        <option>opt 1</option>
        <option>opt 2</option>
        <option>opt 3</option>
    </optgroup>
    <optgroup label="Label 2">
        <option>opt 4</option>
        <option>opt 5</option>
        <option>opt 6</option>
        <option>opt 7</option>
    </optgroup>
</select>

Generated from setting.select

Thank you

Sorry my english is hard to understand I use google translate.

Answer 1

I would create the elements directly using jQuery. And then, as you already commented, iterate through your settings, create the selects, optgroups and options:

$.fn.TestPlugin = function( options ) {
    var setting = $.extend({
        "image" : [ "image1.jpg", "image2.jpg", "image2.jpg"],
        "select": [
                    {
                        "Label 1": ["opt 1", "opt 2", "opt 3"],
                        "Label 2": ["opt 4", "opt 5", "opt 6", "opt 7"]
                    }
                  ]
    }, options );

    return this.each(function( index ){
        $( this ).wrap( "<div class='container' id='container-"+ [index+1] +"'></div>" );       

        for (var i = 0; i < setting.select.length; i++) { // iterate all select definitions
          var sel = setting.select[i];
          var $select = $("<select />"); // create a select element
          for (var lbl in sel) { // iterate all labels
            if (!sel.hasOwnProperty(lbl)) { // ignore inherited members
              continue;
            }
            var opt = sel[lbl];
            var $optgrp = $('<optgroup />').attr('label', lbl).appendTo($select); // create optgroup and add to select
            for (var j = 0; j < opt.length; j++) { // iterate options
              $('<option />').text(opt[j]).appendTo($optgrp); // create option and add to optgroup
            }
          }
          $select.appendTo( "#container-"+ [index+1] +"" );
        }
    });
};

$('ul>li>div').TestPlugin();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div>Select 1</div>
  </li>
  <li>
    <div>Select 2</div>
  </li>
  <li>
    <div>Select 3</div>
  </li>
</ul>