Der folgende Code funktioniert gut, um die beiden Dropdown-Listenfelder dynamisch zu füllen.

Erstens gibt es die Funktion getBuildings, die die Datei getBuildings.php aufruft.

Dadurch wird die Dropdown-Listenbox buildingID ausgefüllt.

Das funktioniert gut.

Dann gibt es die Funktion getFloors, die die Datei getFloors.php aufruft und die Dropdown-Listenbox auf der Grundlage der Auswahl aus der Dropdown-Listen-Datei buildingID auffüllt.

Das funktioniert auch gut.

Mein Problem ist, dass ich beim Klicken mit der rechten Maustaste auf die Seite zum Anzeigen der Quelle mindestens die Dropdown-Liste buildingID erwartet habe, die mit Werten aus der Datenbank gefüllt ist, dies jedoch nicht.

Was vermisse ich?

Hier ist der Arbeitscode.

<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>
1
Kenny 8 Dez. 2013 im 22:05

3 Antworten

Beste Antwort

Der Quellcode ist der Quellcode (das an den Browser gelieferte HTML-Rohdokument) und keine Serialisierung des DOM, nachdem es von JavaScript bearbeitet wurde.

Wenn Sie das sehen möchten, verwenden Sie einen DOM-Inspektor (die meisten Browser haben heutzutage einen in die Entwicklertools integrierten).

4
Quentin 8 Dez. 2013 im 18:07

Die Funktion View source zeigt nur das an, was der Server an den Browser ausgegeben hat. Ihre Dropdowns werden dynamisch clientseitig erstellt.

Um zu untersuchen, was von JavaScript erstellt wurde, verwenden Sie Tools wie FireBug oder die Debug-Konsole in Chrome.

2
Maciej Sz 8 Dez. 2013 im 18:07

Einfach, weil Sie sie mit Javascript füllen.

0
MillaresRoo 8 Dez. 2013 im 18:08