jQuery on select show div

Question

У меня есть один вопрос о jQuery. Если пользователь выбирает «Presmerovanie» со значением «0» в html select с id «typ», я хочу показать div с id «pres». Вот код:

<dl> 
    <dt><label for="typ">Typ</label></dt> 
    <dd> 
    <select id="typ" size="1"> 
     <option value="1">Normálna</option> 
     <option value="0">Presmerovanie</option> 
    </select> 
    </dd> 
</dl> 
<!-- Len ak je presmerovatelna --> 
<div id="pres" style="display: none;"> 
    <dl> 
     <dt><label for="presmerovat">Presmerovat na</label></dt> 
     <dd> 
     <select id="presmerovat" size="1"> 
      <option>Category 1</option> 
      <option>Category 2</option> 
     </select> 
     </dd> 
    </dl> 
</div> 
<!-- Koniec ak je presmerovatelna --> 

Возможно ли это?

Answer 1

$("#typ").on("change", function() { 
    $("#pres").hide(); 

    if ($(this).val() == '0') { 
     $("#pres").show(); 
    } 
});​ 

demo

Answer 2

Чтобы сделать его гибким, вы можете добавить данные атрибуты выпадающего пунктов:

<select id="typ" size="1"> 
    <option value="1" data-rel="norm">Normálna</option> 
    <option value="0" data-rel="pres">Presmerovanie</option> 
</select> 

Затем связать change событие и обрабатывать выбор:

$(document).ready(function() { 
    $("#typ").on("change", function() { 
     $(this).find("option").each(function() { 
      var rel = $(this).data("rel"); 
      if (rel && rel.length > 0) { 
       var obj = $("#" + rel); 
       if ($(this).is(":selected")) 
        obj.show(); 
       else 
        obj.hide(); 
      } 
     }); 
    }); 

    //show initial item: 
    $("#typ").change(); 
});​ 

Это будет отображаться только связанный элемент выбранного элемента и скрыть все остальные.

Live test case.