我对PHP和MySQL相当陌生,对jQuery有一点经验,对JSON几乎没有经验,只是给你一些背景知识。我正试图在我的表单中实现级联下拉。
我有两个表:
|city|
|city_id INT| - PK
|city VARCHAR (45)|
|state_state_id INT | - FK
|state|
|state_id INT| - PK
|state VARCHAR (25)|
这是我的表格:
State:<br />
<select name="state" id="stateName">
<?php foreach($rows as $row): ?>
<option value="<?php echo htmlentities($row['state'],ENT_QUOTES,'UTF-8');?>"><?php echo htmlentities($row['state'],ENT_QUOTES,'UTF-8');?>
</option>
<?php endforeach; ?>
</select>
<br /><br />
City:<br />
<select name="city" id="cityName"></select>
<input type="submit" name="work_order_submit" id="" value="Add Work Order" />
我用这个查询填充State下拉列表:
$query = "SELECT * FROM state WHERE 1 ORDER BY state";
try{
$stmt = $db->prepare($query);
$stmt->execute();
}catch(PDOException $ex){
//On production remove getMessage.
die("Failed to run query: " . $ex->getMessage());
}
$rows = $stmt->fetchAll();
这是我创建的jQuery,用于运行JSON,并在选择一个州时使用来自state下拉列表的级联值填充City下拉列表:
<script>
function populateCityName(){
$.getJSON('state-names.php', {stateName:$('#stateName').val()},
function(data){
var select = $('#cityName');
var options = select.prop('options');
$('option', select).remove();
$.each(data, function(index, array){
options[options.length] = new Option(array['city']);
});
});
}
$(document).ready(function(){
populateCityName();
$('#stateName').on('change', function(){
populateCityName();
});
});
</script>
下面是state-names.php文件中的代码(我在此代码之前连接到数据库):
$rows = array();
if(isset($_GET['stateName'])){
$query = "SELECT city FROM city INNER JOIN state ON city.state_state_id = state.state_id WHERE state = :state ORDER BY city";
$query_params = array(":state" => $_GET['stateName']);
try{
$stmt = $pdo->prepare($query);
$stmt->execute($query_params);
}catch(PDOException $ex){
//On production remove .getMessage.
die("Failed to run query: " . $ex->getMessage());
}
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);
当我选择表单中的状态时,什么也没有发生。我甚至没有得到一个错误。我已经测试了SQL,它运行良好并检索了我想要的值,但由于某种原因,我无法弄清楚,这些值没有级联到City下拉列表中。
任何帮助都非常感谢。
EDIT:由于我做了更多的调试并实现了一些事情,这是我到目前为止发现的。JSON是这样进来的:
[{"city":"Salt Lake City"},{"city":"Toole"},{"city":"Provo"},{"city":"St. George"}]
我现在知道JSON工作正常。当我将州下拉列表中的下拉选项更改为我知道有城市条目的州时,城市下拉列表显示空白的"选项"字段,表示实际存在的条目数量。所以,使用下面的答案和许多不同的关于级联下拉和链式下拉的教程,我终于弄明白了。我已经提交了一个带有工作代码的答案。
你可以试试:
$.each(data, function(index, array){
// new Option(text [, value, defaultSelected, selected]);
select.add(new Option(array['city'], index), null);
});
? ?
上面的代码除了jQuery函数之外都可以正常工作。好吧,jQuery是为我让它做的事情而工作的,而不是为我真正想让代码做的事情而工作的……很大的差别。
下面是基于在状态下拉菜单中所做的选择来填充城市下拉菜单的工作jQuery:
<script>
function populateCityName(){
$.getJSON('state-names.php', {stateName: $('#stateName').val()},
function(data){
var html = '<option value="';
var htmlEnd = '</option>';
var options = '';
var select = $('#cityName');
$('option', select).remove();
$.each(data, function(index, array){
options += html + array['city'] + '">' + array['city'] + htmlEnd;
});
$('#cityName').append(options);
});
}
$(document).ready(function(){
populateCityName();
$('#stateName').on('change', function(){
populateCityName();
});
});
</script>
之前,代码会找到条目的数量,选择框会显示这个数字,但是选择是空白的。使用此代码,可以找到条目的数量,但也显示了这些条目的值。希望这对以后的其他人有所帮助。