PHP 使用下拉列表过滤 mysql 表，无需 js 或表单答案

【问题标题】：PHP Using dropdown to filter mysql table, without js or formPHP 使用下拉列表过滤 mysql 表，无需 js 或表单
【发布时间】：2013-11-12 15:32:18
【问题描述】：

我正在尝试从下拉列表中选择一个值来限制没有 JS 的 mysql 表选择，直接从页面（因此，不是来自表单，而是使用操作标签）。问题是，下拉菜单有效，重新显示有效，但我无法将所选值放入 $_GET(sel_type)。有人可以帮忙吗？

echo " <td>&nbsp;</td>
    <td><a href='".$_SERVER['PHP_SELF']."?sel_type=$sel_type'><b>
    <select name='s_type' type='text' title='Alleen het geselecteerde item-type zien?' value='".$sel_type."'> ";
        while($fetch_type = mysql_fetch_array($droptype)) {
            echo "  <option id ='" . $fetch_type['type_id']."' value='" . $fetch_type['type_id']."' ";
            if ($sel_type==$fetch_type['type_oms']) echo "selected='selected'";
            echo ">" . $fetch_type['type_oms']."</option>";
             };
echo "  </select></a></b></td>";

【问题讨论】：

<select> 标签需要提交表单或向服务器发出异步请求。否则，您将无法将选定的值发送到服务器。

标签： php mysql

【解决方案1】：

您至少需要一个<form> 标签才能让select 标签在没有JS 的情况下工作。而且您不能在内联 a 元素内使用 select 块元素。并且select 字段没有type 属性和value 属性。

echo " <td>&nbsp;</td>
    <td>
    <form method=\"GET\" action=\"".$_SERVER['PHP_SELF']."\"><select name=\"sel_type\" title=\"Alleen het geselecteerde item-type zien?\"> ";
        while($fetch_type = mysql_fetch_array($droptype)) {
            echo "  <option id ='" . $fetch_type['type_id']."' value='" . $fetch_type['type_id']."' ";
            if ($sel_type==$fetch_type['type_oms']) echo "selected='selected'";
            echo ">" . $fetch_type['type_oms']."</option>";
             };
echo "  </select></form></td>";

【讨论】：

【解决方案2】：

如果没有JS，则需要form 来提交select 的值：

if( isset( $_GET['s_type'] ) ){
    //do something with the select here
    $sel_type   = $_GET['s_type'];
}

echo "<form action='".$_SERVER['PHP_SELF']."' method='GET' id='frm' name='frm'>";
echo " <td>&nbsp;</td>
    <td><b>
    <select name='s_type' title='Alleen het geselecteerde item-type zien?' onchange='document.frm.submit()'> ";
        while($fetch_type = mysql_fetch_array($droptype)) {
            echo "  <option id ='" . $fetch_type['type_id']."' value='" . $fetch_type['type_id']."' ";
            if ($sel_type==$fetch_type['type_oms']) echo "selected='selected'";
            echo ">" . $fetch_type['type_oms']."</option>";
             };
echo "  </select></a></b></td>";
echo "</form>";

【讨论】：

其实是双引号……单引号是给<a>标签的。
我明白了，但是 $sel_type 仍然是空的。例如，它不继承选定的值。
是的，错过了。 @杰夫鲁珀特。更改答案以使用表单发布
那么，使用Form，a标签变成submit了？
对不起，也许我不够清楚，但我希望选择动作是提交。我不想要另一个提交按钮。

【解决方案3】：

致任何对“不可能”感兴趣的人：我已经解决了我自己的问题，无需使用 JS 或表单/提交，因此您可以在任何地方使用它，包括服务器端。答案是我每天都在使用的东西（在菜单中），直到今天我仍然无法建立联系。该解决方案包括一些精美的 CSS，如果您想要普通下拉框的外观，您可以对其进行简化。这是php代码，后面是css：

    echo "<td><ul id='dropselect' class='droptable'>
    <li class='droptable'><a href='".$_SERVER['PHP_SELF']."?sel_type=All types' title='Click one of the types in the list, to limit the db selection'><span>All types</span></a>
    <ul>";
while($fetch_type = mysql_fetch_array($droptype)) {
echo "<li><a href='".$_SERVER['PHP_SELF']."?sel_type=".$fetch_type['type_desc']."'><span>".$fetch_type['type_desc']."</span></a>";
    };
echo "</li></ul></ul></td>";

这里是 CSS；您可以将其直接复制到您的样式表中：

    ul#dropselect,ul#dropselect ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;}
    ul#dropselect ul{
display:none;position:absolute;left:0;top:100%;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
background-color:#79beff;border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-color:#d4d4d4;padding:0 10px 10px;}
    ul#dropselect li:hover>*{
display:block;}
    ul#dropselect li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
    ul#dropselect li:hover{
z-index:1;}
    ul#dropselect ul ul{
position:absolute;left:100%;top:0;}
    ul#dropselect{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
*display:inline;}
    * html ul#dropselect li a{
display:inline-block;}
    ul#dropselect>li{
margin:0;}
    ul#dropselect a:active, ul#dropselect a:focus{
outline-style:none;}
    ul#dropselect a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 15px Trebuchet MS;color:#55aaff;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#c1c1c1;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
    ul#dropselect ul li{
float:none;margin:10px 0 0;}
    ul#dropselect ul a{
text-align:left;padding:2px;background-color:#79beff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:15px Tahoma;color:#ffffff;text-decoration:none;}
    ul#dropselect li:hover>a,ul#dropselect li a.pressed{
background-color:#79beff;border-color:#C0C0C0;border-style:solid;color:#ffffff;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
    ul#dropselect span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:2px;}
    ul#dropselect ul li:hover>a,ul#dropselect ul li a.pressed{
background-color:#FFFFFF;background-image:none;color:#0978b3;text-decoration:none;}

【讨论】：