append函数中的从属选择框

Question

我有两个选择框，其中第二个依赖于第一个，它们工作得很好，但当我使用append函数动态生成它们时，它似乎不起作用，并且没有抛出任何错误……

 <select data-show-subtext="true" class=" selectpicker bs-select form- 
  control" data-live-search="true" data-size="8" name="drawing_id[]" 
   id="drawing">
    <option value=""></option>
      <?php  foreach($get_drawing as $row):  $image=$row->image;  ?>  
       <option data-subtext="<img width='28%' height='90%'  src='<? 
         =base_url("drawing/fabricator/admin_3/".$row->image);?>'>"  
            value="<?php echo $row->drawing_id; ?>"  >
             <?php echo $row->drawing_name;?> 
      </option><?php endforeach; ?> </select>

这里是第二个

    <select data-show-subtext="true" class="  form-control" data-live-search="true" data-size="8" name="profile_series[]" id="profile_series" disabled=''></select> 

我的java脚本代码

$('#drawing').on('change',function(){
    var drawing_id=$(this).val();
    if(drawing_id == '')
    {
        $('#profile_series').prop('disabled',true);
    }
    else{
        $('#profile_series').prop('disabled',false);
        $.ajax({
            url:"<?php echo base_url()?>/fabrication/aluminium/quotation_size/get_profile",
            type:"POST",
            data: {'drawing_id': drawing_id },
            dataType: 'json',
            success : function(data){
                $('#profile_series').html(data);
            },
            error: function(){
                alert('error Occured');
            }
        });
    }

});

现在，在正常的环境中，它的工作方式就像一个护身符，第二个选择值来自数据库，它依赖于第一个选择值的选择，但是现在我的用户可以使用append函数动态生成这两个选择框，但是在这里，我的javascript代码不工作，当用户动态生成它时，依赖选择框没有显示任何东西。

下面是我的append函数。

    $("#dynamic_field").append(function() {
     return $("<div id='row''+j+'' class='row' style='margin-bottom:15px;'><hr><div class='col-sm-1 form-group-sm' style='margin-top:25px; margin-bottom:10px;'><button type='button' name='remove' id=''+j+'' class='btn_remove btn btn-danger'> <i class='fa fa-close'></i></button></div><div class='col-sm-2  form-group-sm'> <label class='control-label'>Drawing</label>   <select data-show-subtext='true' class=' selectpicker bs-select form-control' data-live-search='true' data-size='8' name='drawing_id[]' id='drawing'><option value=''></option> <?php  foreach($get_drawing as $row):  $image=$row->image;  ?>  <option data-subtext='' value='<?php echo $row->drawing_id; ?>'  ><?php echo $row->drawing_name;?> </option><?php endforeach; ?>   </select></div><div class='col-sm-1 form-group-sm'><label class='control-label'>Type</label><input type='text' placeholder='' class='form-control sm' name='type[]' value='' required/> </div><div class='col-sm-2 form-group-sm'><label class='control-label'>Profile Series</label> <select data-show-subtext='true' class='  form-control' data-live-search='true' data-size='8' name='profile_series[]' id='profile_series' disabled=''></select> </div><div class='col-sm-2 form-group-sm'><label class='control-label'>Location</label><input type='text' placeholder='' class='form-control' value='' name='location[]'/></div><div class='col-sm-1 form-group-sm'><label class='control-label'>Width</label><input type='text' placeholder='' class='form-control' value='' name='width[]'/> </div><div class='col-md-1 form-group-sm'><label class='control-label'>Height</label> <input type='text' placeholder='' class='form-control' value='' name='height[]'/> </div> <div class='col-md-1 form-group-sm'><label class='control-label'>Quantity</label> <input type='text' placeholder='' class='form-control' value='1' name='quantity[]'/> </div><div class='col-md-1 form-group-sm'> <label class='control-label'>Fixed</label> <input type='text' placeholder='Height' class='form-control' value='' name='fixed_height[]'/><br><input type='text' placeholder='Height' class='form-control' value='' name='fixed_width[]'/></div></div>");                                                                      
                             });                                
       $('.selectpicker').selectpicker('render');   

       });

它是我的控制器函数

    public function get_drawing_live(){
         $this->load->model('fabrication/aluminium/quotation_size_model','quotation_size');

           if(isset($_GET['term'])){
               $result=$this->quotation_size->get_drawing_live($_GET['term']);
               if(count($result) > 0){
                   foreach($result as $pr){
                       $arr_result[] = $pr->drawing_name; }

                   //$arr_result[] = $pr->drawing_name; }
                     echo json_encode($arr_result);
               }
           }
        }

请帮我解决问题，而不是投反对票。

Answer 1

问题是你必须在你的选择框中委托事件--因为在你定义改变事件的时候，drawing select甚至不存在……

一种解决方案是改变你的产品线

$('#drawing').on('change',function(){

至

$('body').on('change','#drawing', function(){

由于性能的提高，您可能会选择下一个确实存在的父元素，而不是$('body')。

你可以在jquery官方页面here上找到解释。

Answer 2

您需要为每个新创建的select元素附加事件，要做到这一点，一种简单的方法是使用jQuery( html, attributes )，但要继续执行您的代码:您可以更改以下内容

return $("<div id='row''+j+'' class='row' style='margin-bottom:15px;'><hr><div class='col-sm-1 form-group-sm' style='margin-top:25px; margin-bottom:10px;'><button type='button' name='remove' id=''+j+'' class='btn_remove btn btn-danger'> <i class='fa fa-close'></i></button></div><div class='col-sm-2  form-group-sm'> <label class='control-label'>Drawing</label>   <select data-show-subtext='true' class=' selectpicker bs-select form-control' data-live-search='true' data-size='8' name='drawing_id[]' id='drawing'><option value=''></option> <?php  foreach($get_drawing as $row):  $image=$row->image;  ?>  <option data-subtext='' value='<?php echo $row->drawing_id; ?>'  ><?php echo $row->drawing_name;?> </option><?php endforeach; ?>   </select></div><div class='col-sm-1 form-group-sm'><label class='control-label'>Type</label><input type='text' placeholder='' class='form-control sm' name='type[]' value='' required/> </div><div class='col-sm-2 form-group-sm'><label class='control-label'>Profile Series</label> <select data-show-subtext='true' class='  form-control' data-live-search='true' data-size='8' name='profile_series[]' id='profile_series' disabled=''></select> </div><div class='col-sm-2 form-group-sm'><label class='control-label'>Location</label><input type='text' placeholder='' class='form-control' value='' name='location[]'/></div><div class='col-sm-1 form-group-sm'><label class='control-label'>Width</label><input type='text' placeholder='' class='form-control' value='' name='width[]'/> </div><div class='col-md-1 form-group-sm'><label class='control-label'>Height</label> <input type='text' placeholder='' class='form-control' value='' name='height[]'/> </div> <div class='col-md-1 form-group-sm'><label class='control-label'>Quantity</label> <input type='text' placeholder='' class='form-control' value='1' name='quantity[]'/> </div><div class='col-md-1 form-group-sm'> <label class='control-label'>Fixed</label> <input type='text' placeholder='Height' class='form-control' value='' name='fixed_height[]'/><br><input type='text' placeholder='Height' class='form-control' value='' name='fixed_width[]'/></div></div>");

像这样的东西

var $html = $("<div id='row''+j+'' class='row' style='margin-bottom:15px;'><hr><div class='col-sm-1 form-group-sm' style='margin-top:25px; margin-bottom:10px;'><button type='button' name='remove' id=''+j+'' class='btn_remove btn btn-danger'> <i class='fa fa-close'></i></button></div><div class='col-sm-2  form-group-sm'> <label class='control-label'>Drawing</label>   <select data-show-subtext='true' class=' selectpicker bs-select form-control' data-live-search='true' data-size='8' name='drawing_id[]' id='drawing'><option value=''></option> <?php  foreach($get_drawing as $row):  $image=$row->image;  ?>  <option data-subtext='' value='<?php echo $row->drawing_id; ?>'  ><?php echo $row->drawing_name;?> </option><?php endforeach; ?>   </select></div><div class='col-sm-1 form-group-sm'><label class='control-label'>Type</label><input type='text' placeholder='' class='form-control sm' name='type[]' value='' required/> </div><div class='col-sm-2 form-group-sm'><label class='control-label'>Profile Series</label> <select data-show-subtext='true' class='  form-control' data-live-search='true' data-size='8' name='profile_series[]' id='profile_series' disabled=''></select> </div><div class='col-sm-2 form-group-sm'><label class='control-label'>Location</label><input type='text' placeholder='' class='form-control' value='' name='location[]'/></div><div class='col-sm-1 form-group-sm'><label class='control-label'>Width</label><input type='text' placeholder='' class='form-control' value='' name='width[]'/> </div><div class='col-md-1 form-group-sm'><label class='control-label'>Height</label> <input type='text' placeholder='' class='form-control' value='' name='height[]'/> </div> <div class='col-md-1 form-group-sm'><label class='control-label'>Quantity</label> <input type='text' placeholder='' class='form-control' value='1' name='quantity[]'/> </div><div class='col-md-1 form-group-sm'> <label class='control-label'>Fixed</label> <input type='text' placeholder='Height' class='form-control' value='' name='fixed_height[]'/><br><input type='text' placeholder='Height' class='form-control' value='' name='fixed_width[]'/></div></div>");
$html.find('#drawing').on('change', onDrawingChange);
return $html;

当然，您还需要将事件处理程序函数代码包装在一个我命名为onDrawingChange的函数中。另外，由于您使用了多个选择元素，因此不应该给它们一个id (即drawing)，而应该使用一个CSS类。最后，我没有对此进行测试，所以请随时进行测试，然后再回来向我寻求任何澄清。