2012-06-19 2 views
0

Я создаю одну форму в html используя таблицу. У одного из них есть два значения: 1. Профессор, 2. Библиотекарь. Теперь каждое значение имеет разные поля формы. Если я выберу «Профессор», будут показаны разные поля, и если я выберу «Библиотекарь», отобразятся разные поля.Загрузить html-форму на основе значения Dropdown?

Может кто-нибудь сказать мне, как я могу это сделать ??

<table width="435" border="0"> 
    <tr> <td>VIsit Date </td> <td><input type="text" name="textfield" /></td></tr> 
    <tr> <td>Last Visit Date </td> <td><input type="text" name="textfield2" /></td></tr> <tr> <td>Call Type </td> 
     <td> 
      <select name="title" size="1"> 
      <option value ="Pro"> Professor </option> 
      <option value ="Lib"> Librarian </option> </select> 
     </td> 
    </tr> 
</table> 
+1

Можете ли вы вставить свой код? – Angel

+0

<Таблица ширина = "435" граница = "0"> визит Дата <входной тип = "текст" название = "текстовое поле" /> Последний визит Тип вызова <выберите имя = "название" размер = "1"> <значение параметра = "Pro"> Профессор <параметр значение =» Lib "> Библиотекарь – gauravoli

+0

Вы обязаны использовать чистый javascript и таблицы или вы открываете для других решений, например, используя jQuery и divs? – Angel

ответ

0

Вот как это сделать в jquery, забудьте нормальный javascript.

Jquery КОД (PUT ЭТА в головной части)

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script> 
<script> 
    $("#YOUR_SPECIFIC_ID").change(function(){ 
      if ($(this).val() == "Option2") { 
       $('.option1form').hide(''); 
       $('.option2form').show(''); 
      }}); 
     </script> 
     <script> 
      $("#YOUR_SPECIFIC_ID").change(function(){ 
     if ($(this).val() == "Option1") { 
          $('.option1form').show(''); 
       $('.option2form').hide('');}}); 

</script> 

Назначить поле выбора идентификатор:

<select name="asia" style="width:233px;" id="YOUR_SPECIFIC_ID"> 
    <option value="Option1">Option1</option> 
    <option value="Option2">Option2</option> 
    </select> 

Затем вам нужно сделать различные формы для различных выборов. вот так.

<div class="option1form" style="display:none"> 
<input type="text" name="example1_1"> 
<input type="text" name="example1_2"> 
</div> 

<div class="option2form" style="display:none"> 
<input type="text" name="example2_1"> 
<input type="text" name="example2_2"> 
</div> 

Должно работать следующим образом.

+0

Я пробовал вышеуказанный код, но его не работает. Показывается только капля с опцией 1 option2, но после выбора ничего не произошло? – gauravoli

+0

Хммм. Я забыл закрытие, но у него все еще есть небольшая ошибка, которая должна быть исправлена. Я написал это в спешке и имел много собственного кода, чтобы сосредоточиться, но я заработаю. –

+0

Пожалуйста, дайте мне знать, как это исправить? – gauravoli

1

Попробуйте это:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Page title</title> 


    <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script> 
    <script> 
     $(document).ready(function() { 
      $("#callType").on('change', function(){ 
       $('.form1').toggle(); 
       $('.form2').toggle(); 
      }); 
     }); 
    </script> 
    <style> 
     .form2 { 
      display: none; 
     } 
    </style> 

</head> 
<body> 

<select name="title" id="callType"> 
    <option value ="Pro"> Professor </option> 
    <option value ="Lib"> Librarian </option> 
</select> 

<div class="form1"> 
    <input type="text" name="text1" value="text1" /> 
    <input type="text" name="text2" value="text2" /> 
</div> 

<div class="form2"> 
    <input type="text" name="text3" value="text3" /> 
    <input type="text" name="text4" value="text4" /> 
</div> 

</body> 
</html> 

Если у вас есть только два варианта в раскрывающемся списке, первая форма будет видна, а вторая будет скрыта (дисплей: нет;). И на смену они получат свою видимость.

Несколько пунктов забыли упомянуть: 1. У вас есть обработчик событий внутри документа. 2. Имейте в виду, что в css 'visibility' и 'display' различны. Даже если бы я сказал видимость, я имел в виду дисплей. jQuery show(), hide(), toggle() изменяет отображение css. Разница между «видимостью: скрытой» и «отображать: нет» заключается в том, что с видимостью невидимые элементы по-прежнему занимают место на странице.

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