将动态optgroup项加载到html select中

Question

我有一个模态形式，其中两个选择框具有相同的current_models类。

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

每个选择都需要有自己的id ，但是它们会将相同的select选项加​​载到如下组中：

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

这是我的ajax_get_models_man_group.php页面：

<?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\n>";
        }

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

        $currentGroup = $result->man_id;
    }

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

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

    }
?>

问题在于这些值不会加载到select div ！

这是我的ajax源代码结果：

<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）摆脱选择标签内的div

<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）在右div内加载ajax

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