javascript - Jquery 选择的插件在 ajax 响应中不起作用

Question

我有两个选择框。我想在两个选择框中应用所选的插件。

当 No-1 选择框更改时，No-2 选择框从 AJAX 响应生成。

No-1 中的 Chosen Plugin 完美运行。但是当 2 号选择框从 ajax 生成时，选择的插件在 2 号选择框中不起作用。

ma​​in.php

<tr>
   <td>Select Location</td>
   <td>
      <select id="issue_type" name="issue_type" class="chosen-select">
         <option value="" disabled="disabled" selected="selected">Select Location</option>
         <option value="17">RM Store</option>
         <option value="17">PM Store</option>
         <option value="17">FG Store</option>
      </select>
   </td>
</tr>           
<tr id="tr_product" name="product">
   <td>Select Product</td>
   <td></td>
</tr>

ajax 的 JS 代码

$('#location').change(function(){
   if(this.value){
      $('#td_avail_qty').html('');
      $.ajax({
         type:"GET",
         url:"mat_issue.php",
         data:{action:"ajax",sub_action:"location",location:this.value}
      }).done(function(data){
         $('tr#tr_product').show().children().eq(1).html(data);
      });
   }
});

ma​​t_issue.php

$product_str = '<select id="product" name="product" class="chosen-select">
                    <option value="" disabled="disabled" selected="selected">Select Product</option>';
$location = $req['location'];
$sql_product =  "SELECT l.`loccode`, l.`stockid`, l.`quantity`,s.description FROM `locstock` l INNER JOIN stockmaster s ON l.stockid = s.stockid WHERE l.`loccode` = '$location'  AND l.`quantity` > 0";

if($query_fg = DB_query($sql_product,$db)):
   while($data_product = DB_fetch_assoc($query_fg)):
      $product_str .= '<option title="Available Quantity '.$data_product['quantity'].'" value="'.$data_product['stockid'].'">'.$data_product['description'].'</option>';
   endwhile;
endif;
$product_str .= '</select>';
echo $product_str;

No-2 从ajax 成功生成选择框。但是选择的插件在此选择框中不起作用。

我将此代码用于所选插件

var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '.chosen-select-width'     : {width:"95%"}
}
for (var selector in config) {
      $(selector).chosen(config[selector]);
}

我在选择框中使用了 .chosen-select 类

Answer 1

在你的ajax成功函数中传递你的选择的jquery函数...

也许这可以帮助你..

$('#location').change(function(){
   if(this.value){
      $('#td_avail_qty').html('');
      $.ajax({
         type:"GET",
         url:"mat_issue.php",
         data:{action:"ajax",sub_action:"location",location:this.value}
      }).done(function(data){
         $('tr#tr_product').show().children().eq(1).html(data);
         $("#product").chosen({max_selected_options: 5}); //your chosen code for select tag
      });
   }
});

如果您遇到任何其他问题，请告诉我......