Question

I have a “select” tag with the following options:

<select>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

I want to add the “slideUp” and “slideDown” effect using jquery but I can’t find a simple example to approach my need. The effect should look like this combobox example: Telerik Combobox

Answer 1

Here’s one possible solution, you will need to play with the styling:

$(function(){
    $.fn.extend({
        slidingSelect: function(options)
        {
            var select= $(this);
            var selector=select.selector;

            var selectedValue=select.val();

            if(selectedValue=="undefined")
                selectedValue=select.find("option:first").val();                

            var divToggle=$("<div>"+selectedValue+"</div>").attr({id:select.attr("id")+"Toggle"}).css({width:select.width()}).click(function(){
                $(selector).slideToggle();
            }).insertBefore(select);

            select.attr("size",6);  
            select.change(function(){
                divToggle.html(select.val());
                $(selector).slideToggle();
            });

        }       
    });
    $("#colors").hide().slidingSelect();

});

div#colorsToggle
{
    display:block;
    padding:5px;
    border:1px solid black;

}

.select_style{
  position: absolute; 
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colors" class="select_style">
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

This method extends jquery with a slidingSelect function, which creates a toggle div based upon the name of the select, and when that toggle div is clicked on the select slidesDown like it does in the Telerik Control. You will style the #{ID of Select}Toggle in your CSS to create a better looking UI.