2014-03-19 65 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

謝謝你的工作。 –