Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: onChange в select-option

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Atrox
Отправлено: 13 Сентября, 2011 - 02:45:13
Post Id


Новичок


Покинул форум
Сообщений всего: 11
Дата рег-ции: Май 2011  


Помог: 0 раз(а)




Доброй ночи, Знатоки! Была задача: при выборе одного из 2х полей в
CODE (html):
скопировать код в буфер обмена
  1. <select>
  2.    <option>Город</option>
  3.    <option>Область</option>
  4. </select>
вывести новый селект для города ИЛИ селект для области. достаточно тривиально, я полагаю Радость
нашел скрипт
CODE (html):
скопировать код в буфер обмена
  1. <html>
  2. <head>
  3. <title>Изменение полей формы в зависимости от выбора пользователя.</title>
  4. <script language="javascript">
  5. function Display(which) {
  6.   ma=document.getElementById("mail");
  7.   em=document.getElementById("email");
  8.   ph=document.getElementById("phone");
  9.   if (which=="mail") ma.style.display="block";
  10.     else ma.style.display="none";
  11.   if (which=="email") em.style.display="block";
  12.     else em.style.display="none";
  13.   if (which=="phone") ph.style.display="block";
  14.     else ph.style.display="none";
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <form name="form1">
  20. <strong>Как с вами связываться?</strong><br>
  21. <input type="radio" name="type" value="mail" checked onClick="Display('mail');">Почтой
  22. <input type="radio" name="type" value="email" onClick="Display('email');">E-mail
  23. <input type="radio" name="type" value="phone" onClick="Display('phone');">Телефон<br>
  24. <div ID="mail" style="display:block;">
  25. <b>Адрес:</b> <input type="text" name="address" size="25"><br>
  26. <b>Город:</b> <input type="text" name="city" size="14">
  27. <b>страна:</b> <input type="text" name="state" size="5">
  28. <b>Индекс:</b> <input type="text" name="zip" size="9">
  29. </div>
  30. <div ID="email" style="display:none">
  31. <b>E-mail:</b><input type="text" name="email" size="25">
  32. </div>
  33. <div ID="phone" style="display:none">
  34. <b>Телефон:</b><input type="text" name="phone" size="15">
  35. </div>
  36. </form>
  37. </body>
  38. </html>

но он малость не устраивал, так как первый выбор по radiobutton, а не по select.
в итоге накопал вот это
CODE (html):
скопировать код в буфер обмена
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7.  function go(i_page)
  8.   {
  9.     var val_i_page = i_page.value;
  10.     document.getElementById('i_page1').style.display=(val_i_page==0) ? "" : "none";
  11.     document.getElementById('i_page2').style.display=(val_i_page==1) ? "" : "none";
  12.   }
  13. </script>
  14. </head>
  15. </body>
  16. </html>
  17. <body>
  18.  
  19. <select onChange="javascript: go(this);">
  20. <option value="0"> город </option>
  21. <option value="1"> область </option>
  22. </select>
  23. <br><br><br><br>
  24.  
  25. <div id="i_page1">
  26. Районы города<br>
  27. <select>
  28. <option> 1 район города </option>
  29. <option> n район города </option>
  30. </select>
  31. </div>
  32.  
  33. <div id="i_page2" style="display: none">
  34. Города области<br>
  35. <select>
  36. <option> 1 город области </option>
  37. <option> n город области </option>
  38. </select>
  39. </div>
  40.  
  41. </body>
  42. </html>

всё работает, всё как надо. но! ввиду очень незаурядного знания JS,хотя в web не первый год как-то всё руки не доходят... глядя на код скрипта возникло два вопроса знатокам JavaScript - почему так сильно в 1м и втором случае отличается код скрипта? первый выглядит рациональнее, имхо. и существует ли иное, более правильное решение моей задачи?
 
 Top
Соц Сеть
Отправлено: 13 Сентября, 2011 - 09:30:45
Post Id



Посетитель


Покинул форум
Сообщений всего: 307
Дата рег-ции: Авг. 2011  


Помог: 0 раз(а)




я вот так делал и не плохо получилось
CODE (html):
скопировать код в буфер обмена
  1. <select id='gorod' disabled='disabled'>
  2. <option> 1 район города </option>
  3. <option> n район города </option>
  4. </select>
  5.  
  6. <select id='oblst' disabled='disabled'>
  7. <option> 1 город области </option>
  8. <option> n город области </option>
  9. </select>
  10.  
  11. <select id='region' disabled='disabled'>
  12. <option> 1 район города </option>
  13. <option> n район города </option>
  14. </select>

CODE (javascript):
скопировать код в буфер обмена
  1. $('#gorod').change(function(){
  2.  
  3.     var country=$('#gorod option:selected').val();
  4.     getobls();
  5.  
  6. });
  7. $('#oblst').chnage(function(){
  8.    var oblst=$('#oblst option:selected');
  9.   getregion();
  10. });
  11. function getobls(){
  12.     var country=$('#gorod option:selected').val();
  13.     var obl=$('#oblst');
  14.     if(country.length==0){
  15.        obl.attr('disabled',true);
  16.     }
  17.     else{
  18.      obl.attr('disabled',false);
  19.      }
  20. }
  21. function getregion(){
  22.     var oblst=$('#oblst option:selected').val();
  23.     var region=$('#region');
  24.     if(oblst.length==0){
  25.        region.attr('disabled',true);
  26.     }
  27.     else{
  28.      region.attr('disabled',false);
  29.      }
  30. }

(Отредактировано автором: 13 Сентября, 2011 - 09:33:14)

 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB