Question

我正在实现自定义下拉。所以我找到了一个很好的解决方案。但是如果我想要取小按钮（它没有在css中取宽度），就会出现问题。其次我想要下拉应该滚动固定高度？我创造了两个下拉，我先拿了太多的元素。第二个我只拿几个元素，我想先滚下第二个相同的高度。

这是我的小提琴 http://jsfiddle.net/ravi1989/gMLDb/2/

function showOptions(target){
    selectedButton = $(target);
   console.log("target"+target);
   console.log("selectedButton"+selectedButton)

    $("#optionsDisplayDiv").html("");
    var array = this[$(target).attr("data-array")];
    for(var i=0; i< array.length; i++){
        $("#optionsDisplayDiv").append("<div class='optionItem'>" + array[i] + "</div>");
    }
    $("#optionsDisplayDiv").css("width", $(target).width());
    $("#optionsDisplayDiv").css("top", ($(target).position().top + $(target).height()));
    $("#optionsDisplayDiv").show();
}

Answer 1

试试这个：

<a id="vehicleType" class="myOptionButton" data-role="button" data-icon="arrow-d" data-iconpos="right" data-corners="false" data-array="vehicleTypeOptions" onclick="showOptions(this)" style="width:200px">Type</a>
<a id="colorType" class="myOptionButton" data-role="button" data-icon="arrow-d" data-iconpos="right" data-corners="false" data-array="vehicleColorOptions" onclick="showOptions(this)" style="width:200px">Color</a>

<div id="optionsDisplayDiv" style="max-height: 100px; height: 100px; overflow: auto;" >
</div>

http://jsfiddle.net/emdhie/gMLDb/9/

Answer 2

给css中的按钮宽度有效。检查页面中的其他css是否覆盖了按钮css。

要获得下拉列表的修正高度，您可以在css中提供max-height属性。

检查小提琴here

用于脚本的插件

您的js脚本会在很长一段时间内遍历相同的元素，从而影响性能。您可以使用链接和缓存概念来使代码更好。另外遵循拇指规则“永远不要在循环内做dom操作”。

function showOptions(target){
    selectedButton = $(target)     //caching

    var array = this[selectedButton.attr("data-array")],
        option="";
    for(var i=0; i< array.length; i++){
        option += "<div class='optionItem'>" + array[i] + "</div>";
    }
    $("#optionsDisplayDiv").html(option ).css({
                  "width": selectedButton .width(),
                  "top": selectedButton.position().top + selectedButton.height()
     }).show();    //chaining of methods
}

如何在固定高度上滚动自定义下拉元素？

2 个答案:

用于脚本的插件