从下拉列表打开URL

Question

在我的网站上，我有一个下拉列表&每个选项都有自己的URL。当您选择其中一个选项并单击该按钮时，相应的URL将在同一选项卡中打开。

问题：我的表单工作，但是我需要在同一个页面上有2单独的表单。现在，只有第一种形式有效。所以，如果我点击第二个表格上的按钮，它将带来来自公司表格的结果。例如，我在第一份表格上选择了“选项A”，在第二份表格中选择了“选项C”。我单击第二个表单上的'submit‘，但它打开了来自第一个表单的“选项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分配给多个元素。身份证应该是唯一的。因此，您应该使用不同的ids创建两个选择，并将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>

联署材料：

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

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