动态填充两个下拉菜单

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