Выпадающий список HTML

Как создать раскрывающийся список html, который обновляется до тега option disabled после того, как человек выбрал option value, просмотрел их выбор и решил вернуться, чтобы сделать еще один выбор option value.Выпадающий список HTML

HTML:

<form> 
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value"> 
<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option> 
<option value="LINK">Ingham County (Google Map/PDF)</option> 
<option value="LINK">Clinton County (PDF)</option> 
<option value="LINK">Eaton County (PDF)</option> 
</select> 
</form>

В -Выберите Name- тег делает пользователя в URL, который открывается в том же окне.

<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">

В настоящее время он стоит, если человек делает выбор из списка, рассматривает их выбор (открыт в том же окне) и возвращается (в оригинальной веб-страницы), выпадающее меню не возвращается к:

<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>

, но остается в выборе тега option value, если они не обновляют/перезагружают окно браузера.

источник

2013-04-30 Lew

вам нужно будет использовать jquery, чтобы сделать что-то подобное – Andrew

В принципе, вы не можете сделать это без javascript.

Я не знаю, насколько вы знаете, поэтому я предполагаю, что у вас нет предварительного знания javascript.

Следующее должно делать то, что вы просите.

Как вы можете видеть, я изменил атрибут onchange, чтобы вызвать функцию javascript под названием «ResetToDisabled», которая передает список DropDown в качестве параметра, используя ключевое слово «this».

<select name="URL" onchange="ResetToDisabled(this);"> 
    <option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option> 
    <option value="LINK">Ingham County (Google Map/PDF)</option> 
    <option value="LINK">Clinton County (PDF)</option> 
    <option value="LINK">Eaton County (PDF)</option> 
</select> 
<script type="text/javascript"> 
    function ResetToDisabled(DropDown) { 
     var TargetIndex = DropDown.selectedIndex; 
     DropDown.selectedIndex = 0; 
     window.location.href = DropDown.options[TargetIndex].value; 
    } 
</script>

Что здесь происходит, является то, что я создаю яваскрипта функцию под названием «ResetToDisabled», которая принимает в качестве объекта (в данном случае мы можем предположить, что это будет выпадающий список) в качестве параметра.

Эта функция создает временную переменную под названием «TargetIndex» и устанавливает ее значение как выбранный индекс выпадающего списка.

Затем он устанавливает индекс выбранного списка вниз в 0 (первый вариант).

Затем он выполнит вашу строку кода, где вы откроете новую веб-страницу. Однако, так как вы сбросили сброс до первого параметра, когда вы нажмете «назад», он будет помнить, что в качестве параметра, который был выбран.

Я также чувствую, что должен добавить. Похоже, вы пытаетесь добиться того же поведения, что и множество сайтов для своих меню; если это так, вы можете найти «CSS Drop Down Menu», так как вам будет очень сложно изменить внешний вид выделения, если вы попытаетесь это сделать позже.

источник

2013-04-30 14:07:40

Благодарим вас за ответ. Однако я попробовал добавленный код и, похоже, не отображает функцию и не направляет пользователя на URL. – Lew

Я просмотрел опцию CSS Drop Down, но подумал, что я выбрал более подходящий для цели (я бы добавил только дополнительные значения -опции и ссылки на URL-адреса/внешний вид остался прежним). Благодарю вас за предложение. – Lew

Извините, что в моем коде была ошибка, это была последняя строка javascript, теперь она исправлена. Я скопировал эту строку напрямую, не проверяя, чтобы она работала. При вводе непосредственно в атрибут «onchange» ключевое слово «this» ссылалось на раскрывающийся список, однако «это» не будет привязано ни к чему внутри функции javascript. Теперь он просто использует раскрывающееся меню, которое передается в функцию. –

Для этого вам не нужно использовать jquery!

html file;

<form> 
<select name="URL" onchange="changeme(this)"> 
<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option> 
<option value="LINK">Ingham County (Google Map/PDF)</option> 
<option value="LINK">Clinton County (PDF)</option> 
<option value="LINK">Eaton County (PDF)</option> 
</select> 
</form>

js file;

function changeme(mselect) { 
    for (var i = 0; i < mselect.options.length; i++) { 
     if (mselect.options[i].selected == true) { 
      mselect.options[i].setAttribute('disabled', 'disabled'); 
     } 
     else { 
      mselect.options[i].removeAttribute('disabled'); 
     } 
    } 
}

источник

2013-04-30 13:59:15 rcpayan

В зависимости, как они перемещаться обратно на страницу, вы должны быть в состоянии просто иметь немного Javascript настройки selected index на странице загрузки.

YourHTMLElement.selectedIndex = 0;

Замечу, однако, для того, чтобы по-прежнему имеют те же значения, выбранного это звучит, как вы перемещаетесь назад с history.back(); и это, вероятно, не выполнять обычные onload события.

Тем не менее, я нашел ответ here полезный для такой проблемы. Это позволило бы запустить событие jQuery для запуска документа, что означает, что вы можете связать его, чтобы сбросить selectedIndex на 0.

источник

2013-04-30 13:59:24 Turnerj

Выпадающий список HTML

ответ

Смежные вопросы