Question

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

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

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

main.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);
      });
   }
});

mat_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生成。但是选择的插件在这个选择框中不起作用。 enter image description here

我将此代码用于所选插件

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

将chosen jquery function传递到ajax success function ...

可能这可以帮助你..

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

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

Answer 2

在select标记中完成数据加载后，您需要加载选定的内容，请看下面的我的代码段

<script>      
 $('#subject_id').on('change',function(e){
    var subject_id = e.target.value;

    $.get('/ajax_subject_finder/'+subject_id,function(data){

      $('#subject_paper_id').empty();
      $('#subject_paper_id').append("<option></option>");
      $.each(data,function(index,subObject){

        $('#subject_paper_id').append("<option value="+subObject.id+">"+subObject.number+"</option>");

      });

      $('#subject_paper_id').chosen();
    });

});

Jquery选择的插件不能在ajax响应中工作

2 个答案: