[Lena_88]

Добрый вечер! Я делаю два ниспадающих списка. В первом списке при выборе определенного варианта скрываются списки, которые не относятся к выбранному варианту, а отображается тот список, который как раз и относится к выбранному варианту. Всё работает в Мозилле, но совсем не работает в ИЕ и Хроме(
Помогите разобраться в чем проблема.
Коды с комментариями привожу ниже:

<center><select name="vid">
	<option id="first" value="1">первый вариант</option>
	<option id="second" value="2">второй вариант</option>
	</select></center>

	<center><font color="#FFFFFF">Выберите:</font></center> 
	
	<center><select id="showfirst" name="size">
	<option>68</option>
	<option>74</option>
	</select>
	
	<select id="showsecond" class="hPd" name="size">
	<option>110</option>
	<option>116</option>
	</select>

Класс hPd делает невидимым селект.
Код JQuery:

$(function(){
  $("#first").click(function(){
    $("#showsecond").hide();
    $("#showfirst").show();
  });
  $("#second").click(function(){
    $("#showfirst").hide();
    $("#showsecond").show();
    $("#showpants").hide();
    $("#showshoes").hide();
    $("#showcaps").hide();
  });
});

Догадываюсь, что суть проблемы заключается при клике на <option>, которые не ощущает ИЕ и Хром?
Заранее благодарна=)