Выпадающее меню формы html5, с пунктами меню в javascript или jquery?

Question

Выпадающее меню формы html5, с пунктами меню в javascript или jquery?

0

У меня есть эта форма, настроенная как основное выпадающее меню, которое идет к тому, какой из ссылок/параметров выбран сразу, но мне было интересно, возможно ли/добавить все варианты в JavaScript в отдельный файл? Я только начинаю изучать JavaScript, поэтому любое объяснение будет исключительно полезным. Спасибо за ваше время!

<form name="nav">
    <select name="navigation" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" style="width:100%;">
        <option selected="selected">go to...</option>
        <option value="index.html">PROJECTS</option>
        <option value="about.html">ABOUT</option>
    </select>
</form>

user3106225 16 дек. 2013, в 08:08

Источник

1

stackoverflow.com/questions/170986/...
Shahe 16 дек. 2013, в 06:25

Теги:

javascript

jquery

html

html5

html-select

3 ответа

0

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

Например, вы генерируете запрос на стороне клиента, который хотите динамически загружать навигацию в этот выбор и при успешном ajax. Вы заполняете раскрывающийся список.

Напишите больше о структурах, которые вы используете. Является JS чистым JS или, возможно, jQuery.

КСТАТИ. Код, который вы опубликовали, не соответствует HTML5-способу построения выпадающего списка. Перейдите к элементам HTML5 Form и взгляните на первый пример с помощью

<input list="browsers">

kornicameister 16 дек. 2013, в 05:18

0

Вы можете сделать это:

var str = '<option selected="selected">go to...</option>'+
          '<option value="index.html">PROJECTS</option>'+
          '<option value="about.html">ABOUT</option>';
$('#formId').html("");
$('#formId').append(str);

Надеюсь это поможет.

MysticMagicϡ 16 дек. 2013, в 04:35

Ещё вопросы

maček · Accepted Answer · 2013-12-16T03-39-00.000Z

Вот демо, чтобы начать с

HTML-код

<form id="my-form">
  <select name="navigation">
    <option>Go to...</option>
  </select>
</form>

Теперь мы просто кодируем параметры навигации в объекте JSON и динамически загружаем их в элемент select

var navigation = [
  {"title": "PROJECTS", url: "index.html"},
  {"title": "ABOUT", url: "about.html"}
];

var select = document.getElementById("my-form").navigation;

for (var i=0, option; i<navigation.length; i++) {
  option = document.createElement("option");
  option.value = navigation[i].url;
  option.innerText = navigation[i].title;
  select.appendChild(option);
}

select.addEventListener("change", function(event) {
  window.location.href = select.value;
});

Это ванильный JavaScript, но вы можете использовать jQuery, если вам это нравится.

Это работает очень хорошо для меня и делает именно то, что мне нужно. Единственная проблема заключается в том, что он не добавляет параметры в Firefox.