追加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。