Question

以下代码在动态填充两个下拉列表框方面效果很好。

首先，有一个getBuildings函数调用getBuildings.php文件。

这会填充buildingID下拉列表框。

这很好用。

然后有getFloors函数调用getFloors.php文件，并根据来自buildingID dropdownlistbox的选择填充floor floordownlistbox。

这也很好。

我的问题是，当我右键单击页面以查看源代码时，我希望看到至少使用数据库中的值填充的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>

Answer 1

源代码是源代码（传递给浏览器的原始HTML文档），而不是JavaScript操作后的DOM序列化。

如果你想看到它，请使用DOM Inspector（目前大多数浏览器都内置了开发人员工具）。

Answer 2

View source功能仅显示服务器向浏览器输出的内容。您的下拉列表是在客户端动态构建的。

要调查JavaScript使用FireBug等工具或Chrome中的调试控制台构建的内容。

Answer 3

简单地说，因为你使用javascript填充它们。

为什么VIEW SOURCE不会显示填充下拉列表框？

3 个答案: