从下拉列表中打开 URL

Question

在我的网站上，我有一个下拉列表，每个选项都有其 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;
  }
}

Answer 1

您不能将相同的 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>

Answer 2

发生这种情况是因为代码使用 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);
});

当然，您必须更改该回调方法以执行您想要执行的任何操作。