Question

我有两个选择框，其中第二个依赖于第一个并且它们工作正常但是当我使用追加功能动态生成它时它似乎不起作用并且没有任何错误被抛出......

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

});

现在在正常环境中，它的工作方式就像魅力第二选择值来自数据库，这取决于第一个选择但是现在我的用户可以使用追加功能动态生成这两个选择框但是这里我的javascript代码在用户不起作用动态生成依赖选择框，不显示任何内容。

这是我的附加功能..

    $("#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选择甚至不存在......

解决方案是改变你的行

$('#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类。最后我没有对此进行测试，所以请随时测试并回复我的任何澄清。

附加功能中的从属选择框

2 个答案: