1

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

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

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

4

2 回答 2

3

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

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

此方法使用一个函数扩展 jquery，该函数根据选择的名称slidingSelect创建一个div，当单击该切换 div 时，就像在 Telerik 控件中一样。您将在 CSS 中设置样式以创建更好看的 UI。toggleslidesDown#{ID of Select}Toggle

于 2013-01-22T22:13:57.693 回答
1

我猜有一个选择（选项）隐藏。当我按下按钮时，选择出现在按钮下方。当我选择任何选项时，按钮采用选择的值，选择消失。

希望您的代码将被分享。:)

于 2013-01-22T21:57:08.550 回答