使用下拉菜單打開背景鏈接

我對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

使用下拉菜單打開背景鏈接

回答

相關問題