下面的代码在动态填充两个下拉列表框方面效果很好。
首先，有调用 getBuildings.php 文件的 getBuildings 函数。
这会填充 buildingID 下拉列表框。
这很好用。
然后是调用 getFloors.php 文件的 getFloors 函数，并根据从 buildingID 下拉列表框中的选择填充楼层下拉列表框。
这也很好用。
我的问题是，当我右键单击页面查看源代码时，我希望至少看到 buildingID 下拉列表中填充了数据库中的值，但我没有看到。
我错过了什么？
这是工作代码。
<script type="text/javascript">
$(document).ready(function() {
getBuildings();
$('#buildingID').change(function() {
getFloors( $(this).val() );
});
});
function getBuildings() {
$.ajax({
url: 'getBuild.php',
dataType: 'json'
})
.done(function(buildingInfo) {
$(buildingInfo).each(function(i, building) {
$('<option>').val(building.BuildingID).text(building.BuildingDisplay).appendTo( $('#buildingID') );
})
});
}
function getFloors(buildingID) {
$.ajax({
url: 'getRevisions.php',
dataType: 'json',
data: { buildingID: buildingID }
})
.done(function(floorInfo) {
$(floorInfo).each(function(i, floor) {
$('<option>').val(floor.FloorDisplay).text(floor.FloorDisplay).appendTo( $('#floor') );
})
});
}
</script>
</head>
<body>
<div>
<form name="reqform" method='POST' action='processRequest.php'>
<p>
<div class="side-by-side clearfix">
<div>
<select name="buildingID" id="buildingID" data-placeholder="Choose a building..." class="chosen-select" style="width:600px;font-size:12pt;">
<option value="">Choose a building...</option>
</select>
</div>
<br />
<div>
<select name="floor" id="floor" data-placeholder="Choose a floor..." class="chosen-select" style="width:600px;font-size:12pt;">
<option value="">Choose a floor...</option>
</select>
</div>
<br />
<div data-role="content">
<input type="text" name="room" id="room" value=" Enter a room..." onfocus="clearText(this)" onblur="restoreText(this)" style="width:593px;color:#999;font-size:9pt;height:20px;">
</div>
</div>
</p>
</form>
</div>
</body>
</html>
最佳答案
源代码是源代码(传送到浏览器的原始 HTML 文档)，而不是 DOM 在被 JavaScript 操作后的序列化。
如果您想看到它，请使用 DOM 检查器(现在大多数浏览器的开发者工具中都内置了一个检查器)。
关于javascript - 为什么 VIEW SOURCE 不显示填充下拉列表框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20456948/