htmlmaster Ответов: 1

Как использовать HTML-форму для отправки посетителей на определенную страницу

Я хочу иметь два выпадающих списка (select lists) на моей домашней странице. Пользователь должен быть отправлен по адресу mywebsite.com/option1/option2/ при нажатии кнопки ОК.

Option1-это выбранный элемент в первом выпадающем списке, option2-выбранный элемент во втором.

Я думал, что это легко, но до сих пор не нашел решения.

Что я уже пробовал:

 <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

1 Ответов

Рейтинг:
7

ThilinaMD

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

Самый простой способ - использовать java-скрипт.

HTML

<select id="first">
  <option value="link1">link1</option>
  <option value="link2">link2</option>
  <option value="link3">link3</option>
  <option value="link4">link4</option>
</select> 
<select id="second">
  <option value="sublink1">sublink1</option>
  <option value="sublink2">sublink2</option>
  <option value="sublink3">sublink3</option>
  <option value="sublink4">sublink4</option>
</select>
<!--call javascript function-->
<button type="button" onclick="getUrl();">Go to link</button>


язык JavaScript

<script>
  function getUrl(){
      //get selected value
      var first= document.getElementById('first');
      var second = document.getElementById('second');
      
      var first_val=first.options[first.selectedIndex];
      var second_val=second.options[second.selectedIndex];
    
      //generate new url
      var url=first_val.value+"/"+second_val.value;
      //navigate to new url
      window.location.href=url;
  }
</script>

Karthik_Mahalingam

5

ThilinaMD

Спасибо

htmlmaster

Это именно то, что мне было нужно. Большое спасибо! :)

ThilinaMD

добро пожаловать