2013-07-29 3 views
-1

Я создаю домашнюю страницу для своего сайта и вам нужно использовать динамическое текстовое поле, чтобы упростить навигацию.Динамическое выпадение со ссылками

Будут два раскрывающихся меню html. Как только пользователь выберет категорию из первого раскрывающегося меню, все связанные ссылки из выделения загрузятся во второе раскрывающееся меню. Когда пользователь делает выбор из второго текстового поля, веб-страница будет выводить пользователя на выбранную страницу. Ключ со вторым выпадающим меню состоит в том, чтобы сделать все ссылки на элементы таким образом, что когда пользователь делает выбор, они по существу нажимают на ссылку на связанную веб-страницу.

Я загрузил html-документ, который должен дать вам представление о том, что я ищу.

<!DOCTYPE html> 
<head> 
</head> 
<body> 
    <center> 
     <h1>SELECTOR ONE</h1> 
    </center> 
    <center> 
     <select> 
      <option>Option 1</option> 
      <option>Option 2</option> 
      <option>Option 3</option> 
      <option>Option 4</option> 
      <option>Option 5</option> 
      <option>Option 6</option> 
      <option>Option 7</option> 
     </select> 
    </center> 
    <br> 
    <center> 
     <h1>SELECTOR TWO</h1> 
    </center> 
    <center> 
     <select> 
      <option>Option 1 ITEM LINK</option> 
      <option>Option 1 ITEM LINK</option> 
      <option>Option 1 ITEM LINK</option> 
      <option>Option 1 ITEM LINK</option> 
      <option>Option 1 ITEM LINK</option> 
      <option>Option 1 ITEM LINK</option> 
      <option>Option 1 ITEM LINK</option> 
      <option>Option 1 ITEM LINK</option> 
      <option>Option 1 ITEM LINK</option> 
     </select> 
    </center> 
    <center> 
     <select> 
      <option>Option 2 ITEM LINK</option> 
      <option>Option 2 ITEM LINK</option> 
      <option>Option 2 ITEM LINK</option> 
      <option>Option 2 ITEM LINK</option> 
      <option>Option 2 ITEM LINK</option> 
      <option>Option 2 ITEM LINK</option> 
      <option>Option 2 ITEM LINK</option> 
      <option>Option 2 ITEM LINK</option> 
      <option>Option 2 ITEM LINK</option> 
     </select> 
    </center> 
    <center> 
     <select> 
      <option>Option 3 ITEM LINK</option> 
      <option>Option 3 ITEM LINK</option> 
      <option>Option 3 ITEM LINK</option> 
      <option>Option 3 ITEM LINK</option> 
      <option>Option 3 ITEM LINK</option> 
      <option>Option 3 ITEM LINK</option> 
      <option>Option 3 ITEM LINK</option> 
      <option>Option 3 ITEM LINK</option> 
      <option>Option 3 ITEM LINK</option> 
     </select> 
    </center> 
    <br> 
</body> 
</html> 
+0

так это то, что вы хотите, что вы пытались сделать для достижения этого? –

ответ

3

Простой, добавить атрибут value к вашему options, такие как:

<option value="http://www.google.com">Option 3 ITEM LINK</option> 

Создать change событие:

$("select").change(function() { 
    window.location.href = this.value; 
}); 
Смежные вопросы