Событие для select

[rus]

Вопрос такой:

Есть форма, в ней скажем есть селект с выпадающими странами.

Нужно чтоб при выборе любой трех определенных стран, скажем: Египет, Болгария, Турция,

ниже появлялся (или менялся на нужный) селект уже с выбором отеля для этой страны, а если не выбрана ни одна из этих стран

(но выбрана любая другая), то показывать инпут с возможностью самому вписать туда отель.

Пример:

<select>Если выбрана Болгария, то:</select>

<select>Здесь отели для Болгарии...<select>

<select>А если выбрана другая страна (кроме трех перечисленных)</select>

<input>То показывается инпут с возможностью самому вписать туда отель</input>

Подскажите какая функция за эти действия отвечает и возможно ли такое сделать?

В какую сторону рыть и что искать?

Заранее спасибо.

[ZoNT]

событие селекта onchange.

[rus]

событие селекта onchange.

Спасибо за подсказку, вроде нашел то что мне нужно..., но не совсем то.

Вобщем вот код скрипта:

<script type="text/javascript">
var selects = [];

onload = function() {
 filter(document.getElementById("sel1"), selects);
}

function filter(sel) {
 var val = sel.options[sel.selectedIndex].value;
 if (selects[sel] == undefined) selects[sel] = [];

 switch (val) {
 case '2': disable(["sel2", "sel3"], sel);
  break;
 case '13': disable(["sel3"], sel);
  break;
 default : enabled(sel);
 }
}

function disable(ids, sel) {
 enabled(sel);
 for (var i=0; i<ids.length; i++) {
  var id = ids[i];
  var seldisbl = document.getElementById(id);
  if (seldisbl != null) {
   var selbool = true;
   for (var ii=0; ii<selects[sel].length; ii++) {
    if (selects[sel][ii] == id) selbool = false;
   }
   if (selbool) selects[sel][selects[sel].length] = id;
   seldisbl.disabled = true;
  }
 }
}

function enabled(sel) {
 for (var i=0; i<selects[sel].length; i++) {
  var selenbl = document.getElementById(selects[sel][i]);
  selenbl.disabled = false;
 }
}
</script>

И код html формы:

<div>
<select onChange="filter(this)" onKeyUp="filter(this)" id="sel1">
<option value="3">s1op1</option>
<option value="2">s1op2</option>
<option value="13">s1op3</option>
<option value="1">s1op4</option>
</select>

<select id="sel2">
<option>s2op1</option>
<option>s2op2</option>
<option>s2op3</option>
<option>s2op4</option>
</select>

<select id="sel3">
<option>s2op1</option>
<option>s2op2</option>
<option>s2op3</option>
<option>s2op4</option>
</select>

</div>

В этом коде все именно так как я и описывал, при выборе первого селекта (определенного опшина), происходит изменение в другом селекте.

Но..., мне нужно что эти измениния не дизаблед были, а display:block;

Как это сделать, если в стилях прописываю:

<style>
#sel2 {
display:none;
}
#sel3 {
display:none;
}
</style>

То что в скрипте нужно изменить?

[rus]

Пробовал заменить этот кусок:

switch (val) { 
case '2': disable(["sel2", "sel3"], sel);  
break; 
case '13': disable(["sel3"], sel);  
break; 
default : enabled(sel); }

На этот:

 switch (val) {
 case '2': onChange=document.getElementById("sel2").style.display = "block";
  break;
 case '13': onChange=document.getElementById("sel3").style.display = "block";
  break;
 default : onChange=document.getElementById("sel1").style.display = "block";
 }

Знаю что не правильно, но работает, только не совсем так как надо.

Он при выборе опшина все показывает замечательно, но назад когда выбираешь первоначальный, остальные не скрывает, а по идее должен.

Ткните пожалуйста в код, где и на что заменить?

Заранее благодарен.