Javascript DOM и выпадающие

Question

У меня есть выпадающий код, который выглядит следующим образом:

<select name="month" onchange="updateURL()">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  ...
  <option value="12">December</option>
</select>

Как вы можете видеть, когда он изменяется, он вызывает функцию javascript: updateURL ().

Какой код следует добавить в функцию updateURL, которая изменит местоположение документа на:

/calendar/(insert value of the selected option here)

Answer 1

Как вы можете видеть, когда он изменяется, он вызывает функцию javascript: updateURL ().

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

Затем, когда вы используете кнопку «назад», элемент select находится в неправильном состоянии, указывая на страницу, на которую вы переходите, а не на страницу, с которой вы пришли, что делает действие по его изменению довольно запутанным (это может привести к перезагрузить текущую страницу или не загрузить новую страницу).

Кроме того, браузеры перестают предоставлять полезные параметры, такие как «открыть на новой вкладке» или «ссылка на закладку», когда они застряли за окном выбора.

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

Answer 2

<script>
function updateURL(obj) {
    window.location.assign("/calendar/" + obj.value);
    return true;
}
</script>
<select name="month" onchange="updateURL(this)">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  ...
  <option value="12">December</option>
</select>

Answer 3

с макушки головы:

<select id="month"></select>

var monthDrop = document.getElementById('month');

monthDrop.onchange = function() {
    var value = this.value, numericRep = parseInt( value, 10 );
    if ( !isNaN(numericRep) ) {
        location.href = 'http://sitename.com/calendar/' + value;
    }
}

Answer 4

<select onchange="javascript: location.href='/calendar/' + this.options[this.selectedIndex].value;">
...
</select>

Answer 5

window.location.assign(url);