JavaScript-сценарий для эмуляции "submit"
Прошу не судить строго, - в JavaScript я дилетант (пока), - просто помощь нужна.
Есть выпадающий список формы, - по задумке при выборе пользователем одного из <option> страница должна перегрузиться. Для этих целей прикрутил сценарий: <script type="text/javascript" language="javascript">
function change (type){
document.easearch.submit();
}
</script>
<select onchange="javascript:change(document.getElementById('type').selectedIndex);" class="makeMeFancy" id="type" name="type">
<option class="inputbox" selected="selected" value="1">Опция 1</option>
<option class="inputbox" value="2">Опция 2</option>
<option class="inputbox" value="3">Опция 3</option>
</select>
Сценарий срабатывает, но дело в том, что, как всегда, для визуального оформления селектов используется скрипт и генерирует над селектом html список вида: <ul class="srList srCollapsed srBlur">
<li class="srSelectedLi">Опция 1</li>
<li class="">Опция 2</li>
<li>Опция 3</li>
</ul>
<select onchange="javascript:change(document.getElementById('type').selectedIndex);" class="makeMeFancy" id="type" name="type">
<option class="inputbox" selected="selected" value="1">Опция 1</option>
<option class="inputbox" value="2">Опция 2</option>
<option class="inputbox" value="3">Опция 3</option>
</select>
Сам селект убирается из вида при помощи абсолютного позиционирования и свойства "left: -999em;". Как сделать, чтоб функция change () срабатывала при клике по элементу списка <li></li>? Спасибо. |
<form name="myForm">
<ul id="list" style="cursor: pointer">
<li>Опция 1</li>
<li>Опция 2</li>
<li>Опция 3</li>
</ul>
<select id="sel" name="sel">
<option value="1">Опция 1</option>
<option value="2">Опция 2</option>
<option value="3">Опция 3</option>
</select>
</form>
<script>
window.onload = function () {
var list = document.getElementById('list');
var sel = document.getElementById('sel');
list.onclick = function(e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.tagName == 'LI') {
var len = sel.options.length;
for (var i = 0; i < len; i++) {
if (target.innerHTML == sel.options[i].text) {
sel.options[i].selected = true;
document.myForm.submit();
}
}
}
}
sel.onchange = function () {
document.myForm.submit();
}
}
</script>
|
bes, да этот код рабочий. Но в моем случае что-то не хочет работать. Видимо, конфликт со скриптом есть...
А, понял. В коде ведь нету ID у списка <ul>. Но если на странице не один список ul, - как тогда с id быть? |
Цитата:
или, если я вас не так понял, в цикле по всем ul на странице пробежаться с помощью getElementsByTagName("ul") |
Lutsk, всё зависит от ситуации, нужен рабочий пример.
Например, если список появляется чётко перед select-ом, то можно получить этот список как предыдущего соседа. И, кстати, чтобы не делать проверку if (target.innerHTML == sel.options[i].text), можно найти номер пункта <li> (простого способа (без цикла) определить номер списка вроде нет), а потом установить selected для <option> c этим номером (я так понял, у вас список ul однозначно заменяет select). Если у вас select-a вообще никогда не видно, то можно просто присваивать содержимое (innerHTML) пункта списка value input type="hidden". |
Вот, для наглядности выложил пример сюда: http://hostsites.ru/select
В скрипте, который меняет селект на список, я добавил ul.id = 'list'. Но тогда и второму списку присваивается такой же id. А надо, к примеру, чтоб на перегрузку работал только первый. |
Я так понял, вы просто хотите заменить реальные селекты своими более красивыми, а реальные селекты используете лишь для отправки данных. Если это так так, то достаточно для каждого такого селекта по одному input type=hidden, при выборе значения присваиваете его value соответствующего input-а, данные отправятся (а такие сложности, на мой взгляд, ни к чему).
|
Lutsk Интерфейс - наворачивайте сколь угодно сложный(вне формы), но форма простейшая,
По перехваченному(или сгенеренному) событию submit Переносить выбранные-заданные значение из навороченного интерфейса в input hidden как сказал bes выше и только потом отправлять форму |
Ну хорошо, допустим. Но как тогда быть с ul.id = 'list'? Надо как-то тогда присваивать его сугубо для списка, заменяющего select id="sel"...
|
Lutsk,
Хм - какие сложности - по клику на нужный пункт в ul - всовываете данные в input hidden - если пользователь передумал и кликнул - новые - опять всовываете в соответствующий input hidden Задача считать данные, которые расположены прямо в кликабельном элементе на ul типо <li data="Трям"> Трям </li> атрибут data -считываем по клику и суем в input |
| Часовой пояс GMT +3, время: 02:06. |