【问题标题】:html form select taghtml表单选择标签
【发布时间】:2012-10-11 12:40:34
【问题描述】:

这有点烦人,但即使我使用过 html/css 和一点点 jquery,我还没有学到太多关于表单等方面的知识。

我有一个问题,我无法在谷歌上找到答案,但我相信你们中的一些铁杆开发者可以这么快地告诉我!?

我需要制作一个如下所示的表格:

HTML;

<form class="slct-form">
    <select>
        <option value="choose">Choose</option>
        <option value="100.000">100.000</option>
        <option value="150.000">150.000</option>
        <option value="200.000">200.000</option>
    </select>
</form>

我需要当我在下拉表单中选择一个元素时,它应该转到另一个 url... 这不可能吗?最好没有 jquery!

【问题讨论】:

标签: javascript jquery html forms


【解决方案1】:

如果您将id 添加到您的select,您可以像这样通过普通的javascript 访问它:

var selectmenu = document.getElementById("selectMenu");
selectmenu.onchange = function() {
    var selectedOption = this.options[this.selectedIndex];
    if (selectedOption.value != "choose")
        window.location.assign = "/page.php?selectvalue=" + selectedOption.value;
}

【讨论】:

  • 这将如何工作?对不起,我对 java 脚本不太好...如果我有 3 个不同的值,每个值应该去 3 个不同的网站。我的网站是纯 html - 不是 .php
  • @user1719764 我只是添加了链接作为示例,您只需将引号 ("page.php?selectvalue=") 中的部分替换为您需要的 URL。
【解决方案2】:

你可以这样做:

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test</title>
        <script type="text/javascript">
        function donav(dd)
        {
            var navUrl = "";
            switch(dd.selectedIndex)
            {
                case 1:
                    navUrl = "http://www.google.com/";
                    break;
                case 2:
                    navUrl = "http://www.bing.com";
                    break;
         }
         document.location.href = navUrl;
        }
        </script>
    </head>
    <body>
<form class="slct-form">
    <select onchange="donav(this)">
        <option value="choose">Choose</option>
        <option value="100.000">100.000</option>
        <option value="150.000">150.000</option>
        <option value="200.000">200.000</option>
    </select>
</form>
</body>
</html>

【讨论】:

    【解决方案3】:

    如果我正确地理解您,您想将价值从一页带到另一页吗? 您可以将 $_GET['name'] 与 php 一起使用。

    【讨论】:

      猜你喜欢
      • 2023-02-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-02-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多