Связь 2-х selectBox (Html) на JQuery

Хотел бы рассказать вам в кратце как связать 2 поля select используя JQuery.  Иногда нам нужно бывает в зависимости от выбора одного select-а выводит информацию в другом select-e. Например в одном поле мы выбираем машины ваз а в другом поле у нас появляются модели. Я это реализовал  с помощью дополнительных блоков в которые спрятал необходимые select боксы.

Предположим у нас есть такая форма

<p><select id="gruppa1" name="proizv"> <option value="standard">Lada</option> <option value="expanded">VAZ</option> </select><br />
<div id="standard"><select id="gruppa2" name="lada"> <option value="kalina">Kalina</option> </select></div><br />
<div id="expanded" style="display: none;"><select id="gruppa3" name="vaz"> <option value="2106">2106</option> <option value="2107">2107</option> <option value="2108">2108</option> <option value="21099">21099</option> </select></div><br />

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

<br />
<script src="jquery.js" type="text/javascript"></script> <script type="text/javascript">// < ![CDATA[<br />
$(document).ready(function(){  	$("#gruppa1").change(function()  	{  		if($("#gruppa1 option:selected").val()=='expanded'){ 			$("#standard").hide("slow"); 			$("#expanded").show("slow"); 		}else{ 			$("#expanded").hide("slow"); 			$("#standard").show("slow"); 		} 	});  });<br />
// ]]></script><br />

Вот исходный код в архиве и пример

Самый быстрый и надежный обмен MoneyMail RUR на Приват24 USD по выгодным курсам и маленькой комиссией.

Best Offshore Outsourcing in your City, in your area!
 

Добавить комментарий