使用下拉菜单打开背景链接

我对Javascript有点新东西。我不知道我想要完成的这个名字，所以我希望你们都能指出我的方向。使用下拉菜单打开背景链接

我有一个下拉菜单如下：

<select name="PA" disabled="disabled"> 
        <option value="0" selected="selected"> 
         -- 
        </option> 
        <option value="2"> 
         Physical 
        </option> 
        <option value="1"> 
         Special 
        </option> 
        <option value="3"> 
         Status 
        </option> 
       </select>

取决于我选择，2个，1或3装入一个公式，并且工作得很好。

但是，当用户选择三个选项中的一个时，我希望打开另一个网站上的URL。问题是，URL不像site.com/1.html那么简单 - 相反，选择“Physical”选项应该将2加载到上述公式中，我希望它在后台打开site.com/physical。

我意识到你不能将两个值设置为相同的选项，所以我的想法是一个函数，它将2使用数组转换成我想要的单词，然后将该单词加载到URL切换器中。

有人能指出我正确的方向吗？

来源

2011-07-30 paperfairy

您可以使用字符串设置“select”元素的onchange属性。当用户在“select”元素中更改他们的选择时，您的互联网浏览器将通过它的Javascript解释器运行它。

所以要实现你的想法，你可以做到以下几点：

<script> 
     function openPopup(val) { 
      window.open("http://www.example.com/" + val); 
     } 
    </script> 
    <select name="PA" onchange="openPopup(this.options[this.selectedIndex])"> 
     <option value="0" selected="selected"> 
      -- 
     </option> 
     <option value="1" > 
      Special 
     </option> 
     <option value="2"> 
      Physical 
     </option> 
     <option value="3"> 
      Status 
     </option> 
    </select>

只是重复自己，“选择”元素的onchange属性设置为字符串“openPopup（this.options [此.selectedIndex]）“，当有人在下拉菜单中选择一个选项时，通过Javascript解释器。

来源

2011-07-30 03:01:17 fsong

假设val是菜单中选择的值，那么我认为这不会起作用 - 例如，选项2所需的url为example.com/physical.html，而您的示例则为example.com/2 。 – paperfairy

如果你需要../物理，而不是../2使用onchange =“openPopup（this.options [this.selectedIndex] .innerHTML）” – fsong

真棒伙计，谢谢吨。 – paperfairy

如果我明白你在问什么，我想你正在寻找你的选择框上的onchange属性。看看the on change attribute 你可以运行你想要的任何JavaScript函数，当事件被触发。

<select id="PA" name="PA" onchange="javascript:OpenUrl()">

然后在您的OpenUrl函数中，您可以确定选择了哪个项目并打开相应的URL。

编辑

你打开网址功能将如下所示..

function OpenUrl(){ 
    var e = document.getElementById("PA"); 
    var strValue = e.options[e.selectedIndex].value; 
    if (strValue == "1"){ 
     // Open Appropiate Url 
     window.open ("http://www.myurl/special","mywindow"); 
    } 
    else if (strValue == "2"){ 
     window.open ("http://www.myurl/physical", "mywindow"); 
    } 
    else if (strValue == "3"){ 
     window.open ("http://www.myurl/status", "mywindow"); 
    } 
}

每一个的if/else if块打开了自己的网址。这样每个选项都可以打开自己的网址。你究竟如何试图打开网址？在我的例子中，我展示了如何在新窗口中打开url。如果这不是你想要的，你将不得不改变每个if块中的代码。

来源

2011-07-30 02:43:12 Ronnie

会建议只是单独插入网址，而不是使用一个函数来创建一个，因为我的计划？此外，这似乎只打开1个URL，其中每个选项需要打开一个不同的URL。 – paperfairy

查看我对帖子所做的修改。我添加了我认为OpenUrl函数的外观。 – Ronnie

在你的js

function loadWindow(){ 
var urls = ["Please select","http://myurl.com/special.htm", "http://myurl2.com/physical.htm", "http://myurl3.com/status.htm"]; 

var i = document.PA.selectedIndex 
if (i>0){ 
window.open(urls[i]); 
} 
}

在HTML

<select name="PA" onchange="loadWindow()">

来源

2011-07-30 06:55:26 Michal

使用下拉菜单打开背景链接

回答

相关问题