Ниспадающий список и jquery

[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>, которые не ощущает ИЕ и Хром?
Заранее благодарна=)

[devote]

<center><select name="vid">
    <option value="1">первый вариант</option>
    <option 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>

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $('[name="vid"]').change(function(){
    if (this.value == 1 ) {
      $("#showsecond").hide();
      $("#showfirst").show();
    } else if (this.value == 2 ) {
      $("#showfirst").hide();
      $("#showsecond").show();
      $("#showpants").hide();
      $("#showshoes").hide();
      $("#showcaps").hide();
    }
  });
});
</script>

[bes]

<style>
  .hide {
    display: none;
  }
</style>

<select id="sel">
  <option>первый вариант</option>
  <option>второй вариант</option>
  <option>третий вариант</option>
</select>
 
<div id="div">
<select>
  <option>68</option>
  <option>74</option>
</select>
     
<select class="hide">
  <option>110</option>
  <option>116</option>
</select>

<select class="hide">
  <option>115</option>
  <option>119</option>
</select>

<script>
window.onload = function () {
  var sel = document.getElementById('sel');
  var div = document.getElementById('div');
  var curIndex = 0;

  sel.onchange = function () {
    div.children[curIndex].style.display = 'none';
    curIndex = sel.selectedIndex;
    div.children[curIndex].style.display = 'block';
  }

}
</script>

[Lena_88]

Огромное спасибо!!!!
Всё работает!!!
=) счастлива)

[Stroks]

Да реально помогло... все так просто на самом деле... Спасибо!!!