2

这是我的html代码：

<select name="field">
    <option value="Camera">Camera</option>
    <option value="Clothing">Clothing</option>
    <option value="Coins">Coins</option>
    <option value="Mobile">Mobiles</option>
</select>

现在我想要“如果我选择相机，那么我将重定向到另一个页面，可能是 camera.html 页面。同样，如果我选择 Clothing，那么我将重定向到另一个页面，可能是 Clothing.html 页面，对于其他 2 个选项也是如此我想要相同的功能。

如果对这些使用标签使用 4 个不同的链接，我会很容易，但我希望使用表单的提交按钮来完成。我想用选择框和提交调用而不是4个不同的链接来做这件事。

所以我非常需要这方面的帮助。请帮助我并用代码向我解释一下，这样我才能理解我该如何实现这一点？

4

6 回答 6

1

如果您不想为此依赖 JavaScript，只需让表单通过 GET 传递数据。这样，您可以访问 .htaccess 中的选定选项。通过 RewriteCond，您可以将操作重写到所需的页面：

<form method="get" action="nonexistent.html">
    <select name="gotofile">
        <option value="camera">Camera</option>
        <option value="clothing">Clothing</option>
        <option value="coins">Coins</option>
        <option value="mobile">Mobiles</option>
    </select>
</form>

在 .htaccess 文件中：

RewriteEngine On
RewriteCond %{QUERY_STRING} ^gotofile=([^&]+) [NC,OR]
RewriteCond %{QUERY_STRING} &gotofile=([^&]+) [NC]
RewriteRule ^nonexistens\.html$ %1.html
于 2013-07-16T19:26:12.013 回答
1

我会像这样添加一个 JavaScript 处理程序：

<select onchange="location.href=this.value+'.html'">

如果您想使用提交按钮执行此操作，则需要添加更多代码：

<form onsubmit="location.href=this.form.target.value; return false;">
  <select name="target">...</select>
  <input type="submit" />
  ...
于 2013-07-16T19:15:38.597 回答
0

您可以将“值”属性设置为指向您要访问的 URL/网页，然后使用 JavaScript（或 jQuery）重定向用户。

例如

<html>
    <head>
        <script type="text/javascript">

        function redirect() {

            var myUrl = document.getElementById("selectBox").value;
            window.location.href = myUrl;

            return false;

        }

        </script>
    </head>
    <body>
        <form onSubmit="return redirect()">
        <select id="selectBox" name="field">
            <option value="Camera.html">Camera</option>
            <option value="Clothing.html">Clothing</option>
            <option value="Coins.html">Coins</option>
            <option value="Mobile.html">Mobiles</option>
        </select>
        <input type="submit" />
        </form>
    </body>
</html>

编辑：我已按照您的要求更新了代码以使用 onSubmit() 。

于 2013-07-16T19:15:15.090 回答
0

您也可以使用 PHP 和 javscript 重定向来执行此操作。
这是表单的html：

<form action="yourscript.php" method="post">
   <select name="field">
      <option value="Camera">Camera</option>
      <option value="Clothing">Clothing</option>
      <option value="Coins">Coins</option>
      <option value="Mobile">Mobiles</option>
   </select>
   <input type="submit" value="Submit">
</form>

这是 yourscript.php 中的 php：

<?PHP
$field = $_POST['field'];
if ($field == "Camera"){
   ?>
   <script type="text/javascript">
   window.location.href='cameras.php';
   </script>
   <?PHP
}
else if ($field == "Clothing"){
    ?>
    <script type="text/javascript">
    window.location.href='clothing.php';
    </script>
    <?PHP
}
else if ($field == "Coins"){
    ?>
    <script type="text/javascript">
    window.location.href='coins.php';
    </script>
    <?PHP
}
else if ($field == "Mobile"){
    ?>
    <script type="text/javascript">
    window.location.href='mobile.php';
    </script>
    <?PHP
}
?>
于 2013-07-16T21:21:40.800 回答
0

如果我正确理解了您的问题，您希望选择的项目是链接。如果这确实是您要问的，那么一个简单的

<option><a href=`yoursite.html`>something</a></option>

应该管用

于 2013-07-16T19:17:43.900 回答
0

用 jQuery 做这件事真的很好也很容易。jQuery 库位于http://jquery.com/download/以供下载。

我建议将页面名称添加为 vales 或命名您的页面，以便这些值包含在页面名称中（即，如果页面名称是 cameraPage.html，则相机选项的值是“cameraPage”或“ cameraPage.html. 下面的示例将使用 cameraPage，但您可以随意更改它）。

$("formName").submit(function(){
   window.location.href = $('option:selected').val()+".html";
});

选择的$("formName")选择您的表单，.submit(function()表示您现在在提交表单时正在执行一个函数。

"window.location.href ="将用户重定向到 = 之后的内容。

$('option:selected').val()获取所选选项的值。

希望这可以帮助。

于 2013-07-16T20:01:16.510 回答