使用Ajax填充选择框

在页面上呈现选择之前，将分配客户选择的更改事件。将事件处理程序移至document.ready：

<script type="text/javascript" charset="utf-8">$(document).ready(function(){    $('#customer').on('change', function (){        $.getJSON('select.php', {customerId: $(this).val()}, function(data){ var options = ''; for (var x = 0; x < data.length; x++) {     options += '<option value="' + data[x]['id'] + '">' + data[x]['reg'] + '</option>'; } $('#vehicle').html(options);        });    });});</script>

我也改为

$$('#customer')

$('#customer')

$sql = 'SELECT * FROM vehicles WHERe customerID = ' . (int)$id;

在此处将ID强制转换为int会阻止SQLi，但是您应该考虑使用Prepared
Statement
。

您在问题中提到的错误看起来与您的代码无关。它看起来与Chrome扩展程序有关。

这不是问题的一部分，但这是构建车辆选项的代码的改进版本：

$.getJSON('select.php', {customerId: $(this).val()}, function(data){    var vehicle = $('#vehicle');    for (var x = 0; x < data.length; x++) {        vehicle.append(new Option(data[x].reg, data[x].id));    }});

改进之处包括：

• 将选择存储在变量中，这样我们就不必在循环的每次迭代中都继续查询DOM
• 使用

  new Option(...)

  和

  .append()

  创建选项并将其添加到车辆选择中。像这样构建元素比创建原始HTML更好，因为这样一来，您不必担心诸如

  <

  和

  >

  数据之类的字符-这会破坏当前代码的HTML。
• 您的数据被解码为Javascript对象数组，因此，首选使用对象符号（

  data[x].id

  ）而不是

  data[x]['id']

  。