Question

我有一个带有以下选项的“select”标签：

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

我想使用jquery添加“slideUp”和“slideDown”效果，但我找不到一个简单的例子来满足我的需要。效果应该像这个组合框示例：Telerik Combobox

Answer 1

这是一个可能的解决方案，您需要使用样式：

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

此方法使用slidingSelect函数扩展jquery，该函数根据select的名称创建toggle div，并在select slidesDown上单击该toggle div时在Telerik控制中。您将在CSS中设置#{ID of Select}Toggle样式以创建更好看的UI。

Answer 2

我猜有隐藏的选择（选项）。当我按下按钮时，按钮下方会出现选择。当我选择任何选项时，按钮会选择所选值并且选择消失。

希望您的代码能够分享。：）

jquery在“select”标签或组合框上滑动上下效果

2 个答案: