2014-03-19 38 views
1

我有两个选择框。我想在两个选择框中应用选定的插件。jquery选择的插件不工作在ajax响应

当No-1选择框更改,然后No-2从AJAX响应中选择框生成。

No-1中的选择插件完美地工作。但是当No-2选择框从ajax生成时,选择的插件在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> 

阿贾克斯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; 

号-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类在我的选择框

+0

你能告诉我们第二个选择框的插件代码吗?并且由于它是动态创建的,而不是'change',您可以尝试_ [on change](https://api.jquery.com/on/)_ –

+0

@ICanHasCheezburger查看我的更新问题。我在我的选择框中使用'.chosen-select'类来应用所选插件 –

回答

2

通过你的​​在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 
     }); 
    } 
}); 

让我知道你是否面临任何其他问题....

+0

谢谢你的工作。 –