Question

我正在尝试使用javascript来自www.gerrendesign.com/entry_images/selectboxdemo.zip中的自定义样式选择框因为我在选择框中有很多条目我需要制作但是我仍然坚持创建滚动功能。

由于此选择框与几乎所有旧版和新版浏览器兼容。我只需要建议或解决方法如何在上面的链接/附加文件中添加滚动 - 如果选择框中填充了大量条目（例如城市，州或汇率......）

被困在这里...... 谢谢你的合作伊万

这是代码：

$(document).ready(function(){
  // first locate all of the select tags on the page and hide them
  $("select.changeMe").css('display','none');
  //now, for each select box, run this function
  $("select.changeMe").each(function(){

var curSel = $(this);
// get the CSS width from the original select box
var gddWidth = $(curSel).css('width');
var gddWidthL = gddWidth.slice(0,-2);
var gddWidth2 = gddWidthL - 28;
var gddWidth3 = gddWidthL - 16;
// build the new div structure
var gddTop = '<div style="width:' + gddWidthL + 'px" class="selectME" tabindex="0"><div class="cornerstop"><div><div></div></div></div><div class="middle"><div><div><div>';
//get the default selected option
var whatSelected = $(curSel).children('option:selected').text();
//write the default
var gddFirst = '<div class="first"><span class="selectME gselected" style="width:'+ gddWidth2 +  'px;">'+ whatSelected +'</span><span id="arrowImg"></span><div class="clears"></div></div><ul class="selectME">';
// create a new array of div options from the original's options
var addItems = new Array();      
$(curSel).children('option').each( function() {           
    var text = $(this).text();  
    var selVal = $(this).attr('value'); 
    var before =  '<li style="width:' + gddWidthL + 'px;"><a href="#" rel="' + selVal + '" tabindex="0"  style="width:' + gddWidth3 + 'px;">';
    var after = '</a></li>';           
    addItems.push(before + text + after);
});
//hide the default from the list of options 
var removeFirst = addItems.shift();
// create the end of the div selectbox and close everything off
var gddBottom ='</ul></div></div></div></div><div class="cornersbottom"><div><div></div></div></div></div>'
//write everything after each selectbox
var GDD = gddTop + gddFirst + addItems.join('') + gddBottom;
$(curSel).after(GDD);
//this var selects the div select box directly after each of the origials
var nGDD = $(curSel).next('div.selectME');

$(nGDD).find('li:first').addClass("first");

$(nGDD).find('li:last').addClass('last');
//handle the on click functions - push results back to old text box
$(nGDD).click( function(e) {
     var myTarA = $(e.target).attr('rel');
     var myTarT = $(e.target).text();
     var myTar = $(e.target);
     //if closed, then open
     if( $(nGDD).find('li').css('display') == 'none')
        {
                //this next line closes any other selectboxes that might be open
                $('div.selectME').find('li').css('display','none');
                $(nGDD).find('li').css('display','block');

                //if user clicks off of the div select box, then shut the whole thing down
                $(document.window || 'body').click( function(f) {
                        var myTar2 = $(f.target);
                        if (myTar2 !== nGDD) {$(nGDD).find('li').css('display','none');}
                });
                        return false;
        }
        else
        {      
                if (myTarA == null){
                    $(nGDD).find('li').css('display','none');
                            return false;
                        }
                        else {
                            //set the value of the old select box
                            $(curSel).val(myTarA);
                            //set the text of the new one
                             $(nGDD).find('span.gselected').text(myTarT);
                             $(nGDD).find('li').css('display','none');
                             return false;
                        }
        }
//handle the tab index functions
 }).focus( function(e) {        


     $(nGDD).find('li:first').addClass('currentDD');
     $(nGDD).find('li:last').addClass('lastDD');
     function checkKey(e){
        //on keypress handle functions
        function moveDown() {
            var current = $(nGDD).find('.currentDD:first');
            var next = $(nGDD).find('.currentDD').next();
            if ($(current).is('.lastDD')){
            return false;
            } else {
                $(next).addClass('currentDD');
                $(current).removeClass('currentDD');
            }
        }
        function moveUp() {
            var current = $(nGDD).find('.currentDD:first');
            var prev = $(nGDD).find('.currentDD').prev();
            if ($(current).is('.first')){
            return false;
            } else {
                $(prev).addClass('currentDD');
                $(current).removeClass('currentDD');
            }
        }
        var curText = $(nGDD).find('.currentDD:first').text();
        var curVal = $(nGDD).find('.currentDD:first a').attr('rel');
       switch (e.keyCode) {
            case 40:
                $(curSel).val(curVal);
                $(nGDD).find('span.gselected').text(curText);
                moveDown();
                return false;
                break;
            case 38:
                $(curSel).val(curVal);
                $(nGDD).find('span.gselected').text(curText);
                moveUp();
                return false;
                break;
            case 13:
                $(nGDD).find('li').css('display','none');
                }     
    }
    $(document).keydown(checkKey);  
}).blur( function() {
        $(document).unbind('keydown');
});
  });
});

Answer 1

您可以在div中呈现列表，该列表具有固定高度或最大高度（取决于您的跨浏览器要求）。假设默认滚动条没问题......

如果结构符合

的方向

<div class="select_data_container">
  <ul class="select_rows">
     <li>row1</li>
     <li>row2</li>
  </ul>
</div>

CSS示例可能是

.select_data_container {overflow-y: auto; height: 200px;}
.select_rows {display:block;}

自定义样式选择框

1 个答案: