jQuery的滑动上下对＆QUOT;选取[标签或组合框 [英] jquery Slide up-down effect on "select" tag or combobox

问题描述

我有一个选择标记和下列选项：

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>

我要添加的效果基本show和了slideDown使用jQuery效果，但我无法找到一个简单的例子来接近我的需要。效果应该是这样的组合框例如： Telerik的组合框

推荐答案

下面是一个可能的解决方案，你将需要与造型玩：

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

HTML -

<select id="colors" class="select_style">
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

CSS -

CSS -

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

}

.select_style{
  position: absolute; 
 }

jQuery的 -

jQuery -

$(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();

});

此方法扩展了 slidingSelect 函数，它创建jQuery的一个切换 DIV根据选择的名称，而当点击了选择的切换DIV slidesDown 像它在Telerik的控制一样。您将在样式＃切换 {选择的ID}在CSS创建一个更好看的UI。

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.

这篇关于jQuery的滑动上下对＆QUOT;选取[标签或组合框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！