我试图避免在这里重复,因为在SO周围的任何其他"jQuery选择菜单"帖子中都没有看到我的问题得到解决。 只是希望被推向正确的方向。
我有一组选择框,用于按品牌和型号搜索汽车的结果。 当然,第一个<select>
是汽车的制造。此<select>
元素正在用 PHP 填充页面加载。选择"制造"后,将通过 AJAX 传递 makeID,以检索相对于所选"制造"的模型集。
这一切都很好用,我的问题是当我对我的 Make 列表进行多项选择时,它永远不会刷新第二个<select>
框,从而将许多不同的品牌模型附加到第二个<select>
框中。
如何刷新第二个<select>
框以仅显示相对于第一个<select>
框的选择的当前结果。
我的网页:
<form method="post" action="">
<p>
<label for="make">Make</label>
<select name="make" id="make">
<?php foreach ($usedMakes->MakeResult as $MakeResult) { ?>
<option value="<?php echo $MakeResult->makeId; ?>"><?php echo $MakeResult->makeName; ?></option>
<?php } ?>
</select>
</p>
<p>
<label for="model">Model</label>
<select name="model" id="model">
<option value="" selected>Make a Selection</option>
</select>
</p>
<p>
<button name="submit" id="submit"> Submit </button>
</p>
</form>
我的JavaScript:
$("#make").change(function() {
var makeId = $(this).val();
$.ajax({
url: "process.inc.php?makeId=" + makeId,
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
for(i = 0 ; i < data.length; i++) {
var modelId = data[i].ModelResult.modelId;
var modelName = data[i].ModelResult.modelName;
var response = "<option value="" + modelId + "">" + modelName + "</option>";
var appendedData = $(response).insertAfter($("#model option:first-child"));
$("#model option:first-child").data(appendedData);
};
}
});
});
删除选项
$("#model option").remove(); //removes all
$("#model option:gt(0)").remove(); //leaves first item, removes the rest
您应该仅在构建整个列表后更新 ,而不是在 for 循环中更新
var list = "":
for (i = 0 ; i < data.length; i++) {
var modelId = data[i].ModelResult.modelId;
var modelName = data[i].ModelResult.modelName;
list += "<option value="" + modelId + "">" + modelName + "</option>";
};
var theSelect = $("#model");
theSelect.find("option:gt(0)").remove();
theSelect.append(list);
只需在每个响应上清空它,然后附加它
试试这个。.
$("#model").empty()
,然后在 AJAX 请求中追加新值。
这将确保仅显示当前选择的模型。