2013-07-16 16 views
2

这里是我的html代码:我想补充的HTML选择框4个不同的条件

<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.html页面以同样的方式为其他2个选项,以及我想要相同的功能

如果生病使用这4个不同的链接使用标签,但我想这样做使用表单的提交按钮我想用选择框和on-submit调用,而不是4个不同的链接做这件事..

所以我非常需要关于这方面的帮助..请帮我解释一下这段代码,这样我就能理解我该如何实现这个了?

+0

用HTML你不能,但你可以用JavaScript。你能够在你的项目中使用JavaScript吗? –

+0

下拉菜单可能会实现比本地表单字段更好的功能。 –

回答

0

您可以将'value'属性设置为指向您想要转到的URL /网页,然后使用JavaScript(或jQuery)重定向用户。

E.g.

<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()为你问。

+0

它是否适用于窗体的onSubmit按钮调用???就像我在提交按钮中称之为onSubmit =“redirect()” –

+0

非常感谢你对我的代码所做的一切 –

+0

你能帮我解答吗? http://stackoverflow.com/questions/17686196/i-want-to-save-the-data-from-text-fields-and-select-boxes-of-html-and-want-to-pa –

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" /> 
    ... 
+0

我可以使用Javascript,如果有人可以教我一点,我该如何使用Javascript来做到这一点。我希望使用表单的提交按钮完成此操作。我想用选择框做这件事。提交它将检查相机是否已被选中,然后它将进入其页面和其他类似的..我不想使用任何下拉菜单。由于我在这种形式的选择框中还有其他文本字段 –

+0

请参阅我的更新(对于延迟,我使用移动设备表示歉意) – rekire

+0

我没有正确地获取代码,我应该在哪里添加4个链接以获得所有4个选项? –

0

如果我理解你的问题正确地说,你希望选择的项目是链接。如果这确实是你所要求的那么简单

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

应工作

+0

没有我不问我想要如果选择任何选择形式选择框然后有一个提交按钮的形式,所以当任何人点击提交按钮,它会去那个特定的页面取决于选择选项中选择方块 –

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 
+0

好戏我喜欢。 – rekire

0

真的很好,易于使用jQuery来做到这一点。 jQuery库位于http://jquery.com/download/下载。

我建议添加页面的名称作为vales或命名您的页面,以便将值包含在页面的名称中(即,如果页面名称是cameraPage.html,则相机选项的值为“ cameraPage “或 ”cameraPage.html。下面的例子将使用cameraPage,但你可以改变它是如何请你)。

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

$(“ 窗体名称”)选择选择您的形式和.submit(函数()意味着您现在正在提交表单时正在执行的功能。

“window.location。HREF =”重定向用户到=后什么都谈到

$( '选项:选择')。。VAL()获取所选选项的值

希望这有助于

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 
} 
?> 
相关问题