Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.07.2012, 22:43
Аспирант
Отправить личное сообщение для Lutsk Посмотреть профиль Найти все сообщения от Lutsk
 
Регистрация: 24.06.2011
Сообщений: 53

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>?

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 05.07.2012, 23:54
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 06.07.2012, 09:17
Аспирант
Отправить личное сообщение для Lutsk Посмотреть профиль Найти все сообщения от Lutsk
 
Регистрация: 24.06.2011
Сообщений: 53

bes, да этот код рабочий. Но в моем случае что-то не хочет работать. Видимо, конфликт со скриптом есть...
А, понял. В коде ведь нету ID у списка <ul>.
Но если на странице не один список ul, - как тогда с id быть?

Последний раз редактировалось Lutsk, 06.07.2012 в 09:42.
Ответить с цитированием
  #4 (permalink)  
Старый 06.07.2012, 10:18
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Сообщение от Lutsk Посмотреть сообщение
bes, да этот код рабочий. Но в моем случае что-то не хочет работать. Видимо, конфликт со скриптом есть...
А, понял. В коде ведь нету ID у списка <ul>.
Но если на странице не один список ul, - как тогда с id быть?
для каждого списка ul поставьте уникальный идентификатор id
или, если я вас не так понял, в цикле по всем ul на странице пробежаться с помощью getElementsByTagName("ul")
Ответить с цитированием
  #5 (permalink)  
Старый 06.07.2012, 10:33
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Lutsk, всё зависит от ситуации, нужен рабочий пример.
Например, если список появляется чётко перед select-ом, то можно получить этот список как предыдущего соседа.
И, кстати, чтобы не делать проверку if (target.innerHTML == sel.options[i].text), можно найти номер пункта <li> (простого способа (без цикла) определить номер списка вроде нет), а потом установить selected для <option> c этим номером (я так понял, у вас список ul однозначно заменяет select).
Если у вас select-a вообще никогда не видно, то можно просто присваивать содержимое (innerHTML) пункта списка value input type="hidden".

Последний раз редактировалось bes, 06.07.2012 в 10:37.
Ответить с цитированием
  #6 (permalink)  
Старый 06.07.2012, 14:30
Аспирант
Отправить личное сообщение для Lutsk Посмотреть профиль Найти все сообщения от Lutsk
 
Регистрация: 24.06.2011
Сообщений: 53

Вот, для наглядности выложил пример сюда: http://hostsites.ru/select
В скрипте, который меняет селект на список, я добавил ul.id = 'list'. Но тогда и второму списку присваивается такой же id. А надо, к примеру, чтоб на перегрузку работал только первый.
Ответить с цитированием
  #7 (permalink)  
Старый 06.07.2012, 14:50
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Я так понял, вы просто хотите заменить реальные селекты своими более красивыми, а реальные селекты используете лишь для отправки данных. Если это так так, то достаточно для каждого такого селекта по одному input type=hidden, при выборе значения присваиваете его value соответствующего input-а, данные отправятся (а такие сложности, на мой взгляд, ни к чему).
Ответить с цитированием
  #8 (permalink)  
Старый 06.07.2012, 15:05
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Lutsk Интерфейс - наворачивайте сколь угодно сложный(вне формы), но форма простейшая,
По перехваченному(или сгенеренному) событию submit
Переносить выбранные-заданные значение из навороченного интерфейса в input hidden как сказал bes выше
и только потом отправлять форму
Ответить с цитированием
  #9 (permalink)  
Старый 06.07.2012, 15:51
Аспирант
Отправить личное сообщение для Lutsk Посмотреть профиль Найти все сообщения от Lutsk
 
Регистрация: 24.06.2011
Сообщений: 53

Ну хорошо, допустим. Но как тогда быть с ul.id = 'list'? Надо как-то тогда присваивать его сугубо для списка, заменяющего select id="sel"...
Ответить с цитированием
  #10 (permalink)  
Старый 06.07.2012, 15:56
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Lutsk,
Хм - какие сложности - по клику на нужный пункт в ul - всовываете данные в input hidden - если пользователь передумал и кликнул - новые - опять всовываете в соответствующий input hidden
Задача считать данные, которые расположены прямо в кликабельном элементе на ul

типо <li data="Трям"> Трям </li>
атрибут data -считываем по клику и суем в input
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Тесты на javascript по физике для школьников (без регистрации) afportal Ваши сайты и скрипты 5 10.04.2012 18:19
Начала писать книгу по Javascript для блондинок Даша Соколова Оффтопик 25 22.01.2012 10:59
Возможности JavaScript для управления hardware-объектом AZbest Общие вопросы Javascript 19 28.10.2008 17:45
Вопрос для знатоков JavaScript prodis Общие вопросы Javascript 14 09.10.2008 00:31
События в javascript для формы. woo_hoo Общие вопросы Javascript 5 17.07.2008 19:13