Question

我正在尝试建立一个网页，用户可以在其中选择一个网站以及他们想要在该网站上显示的格式。

我已经完成了表格，但是当用户选择Google.com作为网站，然后选择1000x1000作为格式时，我还需要输出链接，我希望输出为“ Google.com/?demo=1000x1000

我认为最好的解决方案是，如果我可以某种方式存储所有这些格式，并且当您选择“ Google.com”作为网站，然后选择我希望链接的格式，例如：“网站”。 com /？demo = format“

这是我到目前为止编写的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>



    <select onchange="location = this.options[this.selectedIndex].value;">
        <option>Choose site</option>
        <option value="#">Google</option>
        <option value="#">Apple</option>
        <option value="#">Amazon</option>
    </select>
    <select onchange="location = this.options[this.selectedIndex].value;">
        <option>Choose format</option>
        <option value="#">Mobile</option>
        <option value="#">Desktop</option>
        <option value="#">Tablet</option>
    </select>





  </head>
  <body>

  </body>
</html>

这有可能吗？

Answer 1

您可以使用以下代码：

SparkContext

Answer 2

您可以使用必需 HTML5属性简化代码，如果输入值为空，该属性将阻止使用默认的浏览器通知发送表单。提交按钮将调用表单onsubmit事件，可以通过preventDefault()方法将其停止，然后像您一样通过location.href进行重定向。

<form onsubmit="event.preventDefault(); location.href=this.site.value+'?demo='+this.format.value;">
    <select name="site" required>
        <option value="">Choose site</option>
        <option value="https://www.google.com">Google</option>
        <option value="https://www.apple.com">Apple</option>
        <option value="https://www.amazon.com">Amazon</option>
    </select>
    <select name="format" required>
        <option value="">Choose format</option>
        <option value="1x1">Mobile</option>
        <option value="2x2">Desktop</option>
        <option value="3x3">Tablet</option>
    </select>
    <input type="submit">
</form>

阅读评论后，我相信您可以从可以在“提交”按钮上设置的 formaction 属性中受益。这样可以简化代码（根本不需要javascript）：

<form>
    <select name="format" required>
        <option value="">Choose format</option>
        <option value="1x1">Mobile</option>
        <option value="2x2">Desktop</option>
        <option value="3x3">Tablet</option>
    </select>
    <input type="submit" value="Google" formaction="https://www.google.com">
    <input type="submit" value="Apple" formaction="https://www.apple.com">
    <input type="submit" value="Amazon" formaction="https://www.amazon.com">
</form>

创建表单并根据选择输出链接

2 个答案: