爲什麼VIEW SOURCE不顯示填充的dropdownlistboxes？

下面的代碼在動態填充兩個dropdownlistboxes方面效果很好。爲什麼VIEW SOURCE不顯示填充的dropdownlistboxes？

首先，getBuildings函數調用getBuildings.php文件。

這填充buildingID dropdownlistbox。

這工作正常。

然後有getFloors函數調用getFloors.php文件並基於buildingID dropdownlistbox中的選擇填充floor下拉列表框。

這工作得很好。

我的問題是，當我右鍵單擊頁面查看源代碼時，我希望看到至少buildingID dropdownlist填充了來自數據庫的值，但我沒有。

我錯過了什麼？

這裏是工作代碼。

<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>

來源

2013-12-08 Kenny

你錯過了AJAX的觀點。您應該使用Chrome上的FireBug或DEV Tools檢查生成的源代碼，右鍵單擊並查看源代碼是HTML頁面的初始狀態。 –

的源代碼是源代碼（遞送給瀏覽器的原始HTML文檔），而不是在它已經由JavaScript操縱的DOM的序列化。

如果你想看到，使用DOM Inspector（現在大多數瀏覽器都有一個內置於開發人員工具中的瀏覽器）。

來源

2013-12-08 18:07:30 Quentin

等，謝謝大家的見解。這解釋了爲什麼在下面的鏈接中使用自動完成功能下拉不起作用。 http://harvesthq.github.io/chosen/ 如果手動填充下拉列表中的值，它將起作用。 – Kenny

View source功能僅顯示服務器向瀏覽器輸出的內容。您的下拉列表是在客戶端動態構建的。

爲了研究通過JavaScript使用工具（如FireBug或Chrome中的調試控制檯）構建的是什麼。

來源

2013-12-08 18:07:40

簡單地說，就是使用javascript填充它們。

來源

2013-12-08 18:08:07 MillaresRoo

有幾種技術可以用於客戶端JavaScript，可以調整頁面的實際來源。不是特別有效的技術，請介意，但「因爲JavaScript」不是答案。 – DougM

@DougM對，但不是他正在使用的那個。 – MillaresRoo

好吧，@MillaresRoo，我的痛苦的真正源頭被要求將AutomComplete添加到下拉菜單中，特別是從上面的鏈接中添加AutomComplete。考慮到編寫代碼的方式，沒有辦法做到這一點。 – Kenny

爲什麼VIEW SOURCE不顯示填充的dropdownlistboxes？

回答

相關問題