追加JSON數據到HTML列表框

Question

HTML代碼：

<select name="ser" id="ser" class="form-control" onchange="getPrice(this.value);"> 
<option value="">--Select--</option> 
<option value="Value11">Value1</option> 
<option value="Value2">Value2</option> 
</select> 
<select name="freeitem" id="freeitem" class="form-control"> 
</select> 

JS代碼：

function getPrice(val) { 
    $.ajax({ 
    type: 'post', 
    url: 'get_sales_price.php', 
    data: { 
     get_option: val 
    }, 
    dataType: 'json', 
    success: function(response) { 
     console.log(response) 
     $('#freeitem').html(response.fritm); 

    } 
    }); 
} 

和PHP代碼爲：

$option = $_POST['get_option']; 
    $data = array(); 
    $prdqty = $db->execute("select product_name from master_purchase where product_code='$option' and delet='0'"); 
    while ($tqty = $prdqty->fetch_assoc()) 
    { 
    $data['fritm'] = '<option value="'.$tqty['product_name'].'">'.$tqty['product_name'].'</option>'; 
    } 
    echo json_encode($data); 

，而我們選擇第一個選擇框的內容，需要將一些數據添加到數據庫的第二個選擇框中，我們幾乎完成了這些任務，但第二個選擇框沒有顯示任何值，請幫助我們解決上述問題

Answer 1

我想你的代碼有一些硬編碼值，並將其完美的罰款工作： -

HTML + jQuery的（與html擴展單頁）： -

<select name="ser" id="ser" class="form-control" onchange="getPrice(this.value);"> 
<option value="">--Select--</option> 
<option value="Value11">Value1</option> 
<option value="Value2">Value2</option> 
</select> 
<select name="freeitem" id="freeitem" class="form-control"> 
</select> 
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script><!-- added jquery library--> 
<script type="text/javascript"> 
function getPrice(val) { 
    $.ajax({ 
    type: 'post', 
    url: 'get_sales_price.php', 
    data: { 
     get_option: val 
    }, 
    dataType: 'json', 
    success: function(response) { 
     console.log(response) 
     $('#freeitem').html(response.fritm); 

    } 
    }); 
} 
</script> 

PHP（用硬編碼值）： -

<?php 
$option = $_POST['get_option']; 
$data = array(); 
$data['fritm'] = ''; // you need to define it as empty string first 
for($i = 0;$i<10;$i++) // hard-code started 
{ 
$data['fritm'] .= '<option value="'.$i.'">'.$i.'</option>'; // append each option to the string one-by-one and check `.=` also 
} 
echo json_encode($data); 

輸出： -

http://prntscr.com/auyn7i

http://prntscr.com/auymzf

http://prntscr.com/auynij

注： - 問題可能是存在的，因爲無論你錯過了內循環或其他錯誤拼接的jQuery庫在你的PHP文件。

Answer 2

你需要做兩件事情：

1）串接在while循環的結果。您正在重新分配數組變量，導致最新的數據覆蓋舊數據。 這樣，只會追加舊值。

變化

$data['fritm'] = '<option value="'.$tqty['product_name'].'">'.$tqty['product_name'].'</option>'; 

要

$data['fritm'] .= '<option value="'.$tqty['product_name'].'">'.$tqty['product_name'].'</option>'; 

2）改變

$('#freeitem').html(response.fritm); 

要

$('#freeitem').append(response.fritm); 

由於您只是將選項添加到下拉菜單，而不是更改其HTML。