将动态选择组项目加载到 html 选择中


Load dynamic optgroup items into html select

我有一个模态表单,其中包含两个具有相同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";
    }
?>

问题是这些值没有加载到选择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>

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