Question

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

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

从下拉列表中打开URL

2 个答案: