动态填充两个下拉菜单

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 
    }); 
});