Question

这是有问题的代码：

<form>
    <select name="someoptions">
        <option value="page1.html">Page 1</option>
        <option value="page2.html">Page 2</option>
    </select>
    <input type="submit" value="Submit" class="buttontheme">
</form>

我在stackoverflow上找到了这个链接：Open a link via a button press chosen from a form select option

但是所选答案并未解释在html页面中放置代码或如何使用它的位置。任何人都可以告诉我如何实现这一目标吗？谢谢

到目前为止，我将此作为test.html而没有任何其他文件：

<head>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script> 
    $('#select-id').change(function() {
   url = $('#select-id').val();
   window.open(url);
});
    </script>
    <script> 

</script>

</head>

<body>

<form>
    <select id="select-id" name="someoptions">
        <option value="https://magecomp.com/blog/how-to-install-magento-2-on-windows-on-xampp-server-with-git/">Page 1</option>
        <option value="https://magecomp.com/blog/how-to-install-magento-2-on-windows-on-xampp-server-with-git/">Page 2</option>
    </select>
    <input type="submit" value="Submit" class="buttontheme">
</form>

</body>

当我选择一个选项然后点击“提交”按钮时，它会从我这里得到：

file:///C:/Users/eyeglasses/Desktop/Website/test.html

到

file:///C:/Users/eyeglasses/Desktop/Website/test.html?someoptions=https%3A%2F%2F‌magecomp.com%2Fblog%2Fhow-to-install-magento-2-on-windows-on-xampp-server-with-gi‌t%2F

并且没有做任何事情或更改页面（我仍然看到下拉菜单和提交按钮）。

Answer 1

    <form>
        <select id="select-id" name="someoptions">
            <option value="page1.html">Page 1</option>
            <option value="page2.html">Page 2</option>
        </select>
        <input type="submit" value="Submit" class="buttontheme">
    </form>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script> 
    $('#select-id').change(function() {
       url = $('#select-id').val();
       window.open(url);
    });
    </script>

你必须在你的html头部包含jquery库以使其运行.window.open是javascript的一个函数，它在浏览器中打开url。您必须将url传递给函数window.open才能获得所需的结果。致力于jsfiddle

Answer 2

链接中提供的代码只是将点击注册到页面上的任何按钮。这将是一个更好的解决方案：

<form id="goToPageForm">
    <select name="page">
        <option value="page1.html">Page 1</option>
        <option value="page2.html">Page 2</option>
    </select>
    <input type="submit" value="Submit" class="buttontheme" />
</form>

<script type="text/javascript">
    $('#goToPageForm').submit(function(e) {
        document.location = $(this).find('[name="page"]').val();

        e.preventDefault();
        return false;
    });
</script>

无论表单是如何提交的（即通过单击提交按钮进入按下），浏览器将被重定向到所选页面。

按一个按钮转到在表单选择中选择的链接

2 个答案: