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属性。这样可以方便地显示您想要显示的项目。

您为网站选择元素提供了sites的ID，并且状态选择元素的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
    });
});

动态填充两个下拉菜单

1 个答案: