Как создать этот селектор

Question

Я хочу создать селектор, подобный этому при нажатии на div, он должен показывать другие параметры, например, на изображении, и после выбора другой опции он должен отображать выбранное значение в div.

это изображение от Google translator

Answer 1

Смотрите так: Sample

$(document).ready(function() { 
    $("#lang-from").click(function() { 
    $("#lang-content").slideToggle(350); 
    }); 

    $("#lang-content li").click(function (e) { 
    e.stopPropagation(); 
    $("#lang-content").slideUp(350); 
    $("#lang-from span").text($(this).text()); 
    }); 

}); 

Answer 2

Вы можете сделать что-то вроде этого:

<div id="drop-button"> 
    From: LANGUAGE 
    <ul id="drop-content"> 
     <li>OPTION</li> 
     <li>OPTION</li> 
     <li>OPTION</li> 
     <li>OPTION</li> 
     <li>OPTION</li> 
     <li>OPTION</li> 
    </ul> 
</div> 

<style> 
    #drop-content { display: none; } 
</style> 

<script> 
    $(document).ready(function() { 
     $("#drop-button").toggle(function() { 
      $("#drop-content").fadeIn(350); 
     }, function() { 
      $("#drop-content").fadeOut(350); 
     }); 
    }); 
</script> 

JsFiddle: http://jsfiddle.net/9bzkM/8/

должен работать.