Открыть URL-адрес из выпадающего списка

Question

На моем сайте у меня есть раскрывающийся список &, каждый из которых имеет свой URL-адрес. Когда вы выбираете один из параметров и нажимаете кнопку, соответствующий URL-адрес открывается на той же вкладке.

ПРОБЛЕМА: Моя форма работает, но мне нужно иметь 2 отдельные формы на той же странице. Прямо сейчас работает только первая форма. Поэтому, если я нажму кнопку на второй форме, она принесет результаты из фирменной формы. например У меня есть опция «А», выбранная в первой форме, а «Вариант С» - на второй. Я нажимаю «Отправить» на второй форме, но он открывает 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

вы не можете иметь тот же идентификатор, назначенный для нескольких элементов .. идентификаторы должны быть уникальными .. так что вы должен создать два выбора с разными идентификаторами и изменить функцию 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

Это происходит потому, что код идентификации 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); 
}); 

Конечно, вам придется изменить этот метод обратного вызова, чтобы сделать то, что действие, которое вы хотите быть приняты.