html – 点击按钮转到不同的网址

发布时间：2020-12-14 19:43:48 所属栏目：资源来源：网络整理

导读：我需要创建 HTML代码,如果用户从下拉列表中选择一个项目并单击按钮,它将转到相应的链接. select name="myList"option value="Google" /Googleoption value="yahoo" /yahoooption value="Ask" /Ask/select 如果用户从下拉列表中选择Google并单击按钮,则应将页

我需要创建 HTML代码,如果用户从下拉列表中选择一个项目并单击按钮,它将转到相应的链接.

<select name="myList">
<option value="Google" />Google
<option value="yahoo" />yahoo
<option value="Ask" />Ask
</select>

如果用户从下拉列表中选择Google并单击按钮,则应将页面重定向到www.google.com,如果选择yahoo并单击按钮,则应转至www.yahoo.com

我想提一下,我需要这个场景中的按钮.
我不想在下拉选择中去各自的网站.只有在点击按钮后.

先感谢您.

解决方法

HTML：

<select name="myList" id="ddlMyList">
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
    <option value="http://www.ask.com">Ask</option>
</select>

<input type="button" value="Go To Site!" onclick="NavigateToSite()" />

JavaScript的：

function NavigateToSite(){
    var ddl = document.getElementById("ddlMyList");
    var selectedVal = ddl.options[ddl.selectedIndex].value;

    window.location = selectedVal;
}

您也可以通过以下方式在新窗口中打开网站：

function NavigateToSite(){
    var ddl = document.getElementById("ddlMyList");
    var selectedVal = ddl.options[ddl.selectedIndex].value;

    window.open(selectedVal)
}

作为旁注,您的选项标签格式不正确.你永远不应该使用< ... />标记包含内容时的快捷方式.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!