jQuery下拉以填充第二个下拉菜单和文本字段

时间:2013-04-18 15:47:19

标签: jquery

我想使用jQuery填充第二个选择框和一个文本字段。我在第一个选择框中正确填充了第二个选择框。我无法让它填充文本字段。

从MySQL数据库中检索数据。下面是我在第二个选择框中进行选择的代码。

我的jQuery代码:

<script>
$(document).ready(function(){
  $("#shipment").change(function() {
    $("#vender").load("selection.php", $("#shipment"));
  }).trigger("change");
});
</script>

与此相关的表单字段:

<html>
<label for="shipments">Shipment: </label><select id="shipment" name="shipment_id">
<?php if(isset($shipment_selection)) { echo $shipment_selection; } ?> //echos options from db.
</select>
<label for="vender">Vender: </label><select id="vender" name="vender_id"></select>
<label for="cost">Cost: </label>><input type="text" id="cost" name="cost" value="" />
</html>

获取数据的PHP脚本:

<?php
include('../scripts/db_config.php');

if(isset($_POST['shipment_id'])) {
    if($_POST['shipment_id'] == 1) {
    $sql = 'SELECT id AS vender_id, name AS vender_name FROM venders'; //shows all venders, when shipment is none.
    }
else {
$sql = 'SELECT venders.id AS vender_id, venders.name AS vender_name, shipment.qty AS qty, shipment.cost AS cost FROM shipments INNER JOIN venders ON venders.id=shipments.vender_id WHERE shipments.id='.$_POST['shipment_id']; //Select vender associated with specific shipment.
}
$stmt = $db->query($sql);
$data = array();
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $data[] = $row;
    //echo '<option value="'.$row['vender_id'].'">'.$row['vender_name'].'</option>'; //populates second select box.
    }
echo json_encode($data);
}

在我开始工作之后,我会更好地保护PHP代码。

有关如何在第一个选择框中选择以填充第二个选择框的任何建议,以及文本字段都会很棒。

如果格式化已关闭,则道歉;我是瞎子,所以我不确定它在屏幕上的实际效果。

1 个答案:

答案 0 :(得分:0)

.load()访问的文件应该返回要转储到给定元素中的HTML。你有它返回JSON,原因不明。删除它,并取消注释行输出选项。

或者,不是使用.load(),而是使用完整的AJAX调用并遍历返回的JSON以插入选项。