将动态optgroup项加载到html select中

Question

I have a modal form with two select boxes with the same current_models class.

<div class="row">      
   <div class="col-md-6">
      <div class="form-group">
         <label class="control-label">Model</label>
         <select class='form-control' id='left_model_id' name='left_model_id'>
            <div id="left_model" class="current_models"></div>
         </select>
      </div>
   </div>
   <div class="col-md-6">
      <div class="form-group">
         <label class="control-label">Model</label>
         <select class='form-control' id='right_model_id' name='right_model_id'>
            <div id="right_model" class="current_models"></div>
         </select>
      </div>
   </div>
</div> 

Each select needs to have it's own id, but they are loading the same select options into groups like this:

$('.current_models').load('ajax_get_models_man_group.php');

Here's my ajax_get_models_man_group.php page:

<?php

require_once 'core/init.php';

$user = new User();
if(!$user->isLoggedIn()) {
Redirect::to('login.php');
}


$models = DB::getInstance()->query("SELECT man.id AS man_id, man.man AS man, models.name AS model, models.id AS model_id FROM hearing_aid_models models LEFT JOIN hearing_aid_man man ON man.id = models.man_id WHERE models.currently_fitting = 'Y' AND company_id = '" . $user->data()->company_id . "' ORDER BY man ASC");


if ($models->error()) {
    echo 'Error occurred.'; 
} else {

$currentGroup = null;
foreach( $models->results() as $result ) {
    // start a new optgroup
    if( $currentGroup == null || $result->man_id != $currentGroup ) {
        // end the previous group
        if( $currentGroup != null ) {
            echo "</optgroup
>";
        }

        // start a new group
        echo "<optgroup data-id='{$result->man_id}' label='{$result->man}'>
";

        $currentGroup = $result->man_id;
    }

    echo "<option value='{$result->model_id}'>{$result->model}</option>
";
}

// end the last opt group
if( $currentGroup != null ) echo "</optgroup>
";

    }
?>

The problem is that the values do not load into the select divs!

Here's my ajax source code results:

<optgroup data-id='1' label='Audibel'>
<option value='95'>Start 7 Wireless</option>
<option value='96'>Start 7</option>
<option value='99'>A3i Platinum</option>
</optgroup>
<optgroup data-id='16' label='Phonak'>
<option value='98'>Naida Q70</option>
</optgroup>
<optgroup data-id='2' label='Starkey'>
<option value='100'>S Series i30</option>
<option value='81'>3 Series I 70</option>
<option value='82'>3 Series I 90</option>
</optgroup>

Answer 1

1) Get rid of divs inside select tags

<div class="row">      
   <div class="col-md-6">
      <div class="form-group">
         <label class="control-label">Model</label>
         <select class='form-control current_models' id='left_model_id' name='left_model_id'>
         </select>
      </div>
   </div>
   <div class="col-md-6">
      <div class="form-group">
         <label class="control-label">Model</label>
         <select class='form-control current_models' id='right_model_id' name='right_model_id'>
         </select>
      </div>
   </div>
</div> 

2) load ajax inside the right div

$('.current_models').load('ajax_get_models_man_group.php');