從下拉列表中打開URL

在我的網站上有一個下拉列表&每個選項都有它的URL。當您選擇其中一個選項並單擊該按鈕時，相應的URL會在相同的選項卡中打開。從下拉列表中打開URL

問題： 我的形式的作品，但我需要在同一頁上2個獨立的形式。目前，只有第一種形式正在工作。所以，如果我點擊第二個表單上的按鈕，它將帶來公司形式的結果。例如我在第一個表格中選擇了「選項A」，在第二個表格中選擇了「選項C」。我點擊第二個表單上的「提交」，但它從第一個表格的「選項A」打開一個URL。

只要兩個下拉菜單單獨在同一頁上工作，就可以完全更改當前的代碼/腳本。

下面是代碼：

HTML

<form class="spec-table" name="dropdown"> 
    <tr> 
    <td> 
     <input type="hidden" name="on0" value="This is my drop down" /> 
     This is my drop down 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <select name="selected" id="target" accesskey="E" class="spec-field1"> 
     <option selected value="URL-1">Option A</option> 
     <option value="URL-2">Option B</option> 
     <option value="URL-3">Option C</option> 
     <option value="URL-4">Option D</option> 
     </select> 
    </td> 
    </tr> 
    <input type="button" class="button-spec" value="Visit Link!" 
     onclick="goToNewPage(document.dropdown.selected)"> 
</form>

的Javascript

function goToNewPage() { 
    if(document.getElementById('target').value) { 
    window.location.href = document.getElementById('target').value; 
    } 
}

來源

2013-10-13 user2875670

你不能有相同的ID分配給多個元素.. ID的應該是唯一的..所以你應該創建兩個具有不同ID的選擇，並將您的goToNewPage函數更改爲如下所示

function goToNewPage(i) { 
       if(document.getElementById('target' + i).value){ 
        window.location.href = document.getElementById('target' + i).value; 
       } 
      }

只是一個例子..

<form> 
    <select id="target1" accesskey="E" > 
    <option selected value="http://www.google.com">Google</option> 
       <option value="URL-2">Option B</option> 
       <option value="URL-3">Option C</option> 
       <option value="URL-4">Option D</option> 
       </select> 
     <input type="button" value="Visit Link!" 
onclick="goToNewPage(1)"> 
    </form> 
    <br> 

    <form> 
    <select id="target2" accesskey="R" > 
     <option selected value="http://www.bing.com">Bing</option> 
       <option value="URL-2">Option B</option> 
       <option value="URL-3">Option C</option> 
       <option value="URL-4">Option D</option> 
       </select> 
     <input type="button" value="Visit Link!" 
onclick="goToNewPage(2)"> 
    </form>

來源

2013-10-13 09:23:34

謝謝你的幫助！你的版本在小提琴上工作，但是當我在我的網站上實現完全相同的代碼（並更新JS）時，按鈕一旦點擊就不起作用。在小提琴我使用「沒有換 - 在」這裏是鏈接：http://jsfiddle.net/vladmedv/d5Hwn/ – user2875670

這裏是我的網站與形式http://goo.gl/t8AysJ – user2875670

@ user2875670在您的jsfiddle .. 404這是一個服務器錯誤..：/ –

發生這種情況，因爲該代碼使用ID識別select元件。當您在同一頁上創建此表單的多個實例並使用getElementById加載元素時，將獲得select元素的第一個實例。

修復方法是使用class名稱來標識select元素。

這應該爲你工作：

<form class="spec-table" name="dropdown"> 
    <tr> 
     <td> 
      <input type="hidden" name="on0" value="This is my drop down" />This is my drop down</td> 
    </tr> 
    <tr> 
     <td> 
      <select name="selected" class="target" accesskey="E" class="spec-field1"> 
       <option selected value="URL-1">Option A</option> 
       <option value="URL-2">Option B</option> 
       <option value="URL-3">Option C</option> 
       <option value="URL-4">Option D</option> 
      </select> 
     </td> 
    </tr> 
    <input type="button" class="button-spec" value="Visit Link!"/> 
</form> 

<form class="spec-table" name="dropdown"> 
    <tr> 
     <td> 
      <input type="hidden" name="on0" value="This is my drop down" />This is my drop down</td> 
    </tr> 
    <tr> 
     <td> 
      <select name="selected" class="target" accesskey="E" class="spec-field1"> 
       <option selected value="URL-5">OptionE</option> 
       <option value="URL-6">Option F</option> 
       <option value="URL-7">Option G</option> 
       <option value="URL-8">Option H</option> 
      </select> 
     </td> 
    </tr> 
    <input type="button" class="button-spec" value="Visit Link!"/> 
</form>

JS：

$(".target").change(function(){ 
    console.log(this.value); 
});

當然，你將不得不改變回調方法做你想要採取任何行動。

來源

2013-10-13 09:34:50 sdqali

從下拉列表中打開URL

回答

相關問題