将JSON数据追加到HTML列表框中

3

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);

当我们选择第一个下拉框的内容时,需要从数据库中向第二个下拉框添加一些数据。虽然我们几乎完成了这件事,但第二个下拉框没有显示任何值,请帮助我们解决上述问题。


我尝试了这个,但它没有起作用。 - Sambhu M R
2个回答

1

你需要做两件事:

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。


查看Firebug的控制台并观察响应内容。 - Pupil
我传递了另外一些变量:- $data['price'] = $pprce['sale_price']; $data['tax'] = $pprce['tax_amt']; $data['avalqty'] = $total_stkqty; 和 $data['fritm'] - Sambhu M R
你能添加你的 PHP 代码和 JS 代码的屏幕截图吗? - Sambhu M R

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文件中的其他错误导致的。

请注意注释。 - Alive to die - Anant
它能工作,但存在一些问题。当我在列表框中选择一个项目时,它对应的值会出现在第二个选择框中。当我选择第一个选择框中的任何其他项目时,它的值将与先前出现的结果一起显示。 - Sambhu M R
不会,因为.html将首先替换先前的HTML,然后再添加下一个HTML。当您使用.append时,您所说的情况才会发生。所以请检查一下。 - Alive to die - Anant

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接