動態填充兩個下拉菜單

Question

我不是（我確定你會注意到下面）程序員或編碼員。我編寫網絡文檔手冊。

也就是說，我對HTML，php，css等有些熟悉。但接下來，我完全和完全難倒了：

我正在嘗試爲我的朋友建立一個網站，該網站處於綁定狀態，儘管一切都很順利，但我必須將最終用戶重定向到一個專爲他們的社區而建的網頁。

我需要的是一種讓最終用戶點擊下拉菜單的方式，該菜單列出（通過MySQL查詢）所有可用記錄的狀態，當它們在第一個菜單中選擇一個選項時，第二個菜單通過（再次通過MySQL）填充該州內的社區。

雖然我在互聯網搜尋了可能有用的東西，但我發現我的編碼邏輯不夠完善。但是，我確實發現了一個顯示我正在嘗試執行的基本版本的網站（see here），但似乎無法使其與MySQL一起工作。這是我到目前爲止：

腳本 -

<script> 
function swapOptions(ArrayName) { 
     var ExSelect = document.theForm.sites; 
     var theArray = eval(ArrayName); 
     setOptionText(ExSelect, theArray); 
    } 

function setOptionText(theSelect, theArray) { 
     for (loop = 0; loop < theSelect.options.length; loop++) { 
      theSelect.options[loop].text = theArray[loop]; 
     } 
    } 
</script> 

和HTML -

<form name="theForm"> 
    <select name="chooseCat" onchange="swapOptions(this.options[selectedIndex].text);"> 
     <option value="">Please select your state ...</option>' 
       <?php 
        $query = mysql_query("SELECT DISTINCT state FROM sites ORDER BY state") 
          or die(mysql_error()); 
        while ($result = mysql_fetch_assoc($query)) { 
          $stateChoice = $result['state'];          
          echo '<option value="'; 
          echo "$stateChoice"; 
          echo '">'; 
          echo "$stateChoice"; 
          echo '</option>'; 
          echo '<br />';     
        } 
        ?> 
    </select> 
    <select name="sites" style="min-width: 100px;" onchange="location.href='reports.php?page=' + this.options[this.selectedIndex].value;"> 
        <?php 
        $query = mysql_query("SELECT * FROM sites") 
          or die(mysql_error()); 
        while ($result = mysql_fetch_assoc($query)) {          
          echo '<option value="'; 
          echo '">'; 
          echo $result['longname']; 
          echo '</option>'; 
          echo '<br />';     
         } 
        ?> 
    </select> 
</form> 

這將返回兩個下拉菜單。第一個與我的可用狀態查詢結果，在下拉列表中按字母順序列出。第二種是列出所有網站的長名稱，但是對於表格中的所有網站而言，不僅僅是某個州（剛剛選擇的州）內的網站。

最後，下拉列表1應填入所有可用狀態。一旦用戶選擇他們的狀態，這應該觸發下拉2的人口，並且所有社區都處於他們選擇的狀態。一旦社會的選擇，點擊下拉菜單中的2，它應該重定向用戶的瀏覽器，例如，http://www.webpage.com/reports.php?page=communityNameGoesHere ...

非常感謝您的任何意見，你可能有在這裏:)

Answer 1

你有幾個你可以去的路線。在選擇狀態後，您可以使用AJAX獲取站點列表的值。或者，您可以簡單地使用javascript根據狀態的選擇過濾第二個列表中的值。

我可能認爲第二個對你來說是更好的選擇，因爲它更直截了當。所以我會專注於此，但是如果您想要一個可以討論的AJAX解決方案。

我會修改你的腳本來做一個數據庫調用。由於您是從一張表中查詢信息，因此沒有理由再次調用數據庫。

只需使用SELECT * FROM sites ORDER BY states ASC

然後，您可以通過結果集循環，這樣做

$array = array(); 
while ($row = mysql_fetch_assoc($query)) { 
    $array[$row['state']][] = $row; 
} 

然後建立您的第一選擇，並使用該選項：

foreach($array as $state => $not_used) { 
    echo sprintf('<option value="%1$s">%1$s</option><br />', $state); 
} 

現在建立第二個選擇並填充選項：

foreach($array as $state => $state_array) { 
    foreach($state_array as $site) { 
     echo sprintf('<option class="%1$s" value="%2$s">%3$s</option><br />', $state, $site['shortname'], $site['longname']); 
    } 
} 

請注意，我在此處添加了HTML class屬性。這使得一個方便的句柄只顯示你想要顯示的項目。

您給站點選擇元素的ID爲sites，並且狀態選中元素的ID爲states。在您的CSS中設置以下規則：

#sites { display: none; } 
#sites option { display: none; } 

這將最初隱藏網站菜單及其中的所有選項。

我現在將展示一些簡單的jQuery來隱藏/顯示正確的元素，並在選址時進行重定向。我提到了jQuery，因爲這會讓你試圖做一些事情。

$(document).ready(function() { // calls this function on document ready 
    $('#states').change(function() { // binds onchange function to #states select 
     var selected_state = $(this).val(); // gets current selected value of #states select 
     $('#sites option').hide(); // hides all options in sites select 
     $('.'+selected_state).show(); // show site options with class = selected_state 
     $('#sites').show(); // show entire #sites select (only useful for display from initial hidden state) 
    }); 
    $('#sites').change(function() { // binds onchange function to #sites select 
     window.location = 'reports.php?page=' + $(this).val(); // perform redirect 
    }); 
});