Javascript 自定义样式的选择框

我正在尝试使用javascript从www.gerrendesign.com/entry\u 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');
});
  });
});

$（文档）.ready（函数（）{
//首先找到页面上的所有select标记并隐藏它们
$（“select.changeMe”）.css（'display'，'none'）；
//现在，对于每个选择框，运行此函数
$（“select.changeMe”）。每个（函数（）{
var curSel=$（此）；
//从原始选择框中获取CSS宽度
var gddWidth=$（curSel.css（'width'）；
var gddWidthL=gddWidth.slice（0，-2）；
var gddWidth2=gddWidthL-28；
var gddWidth3=gddWidthL-16；
//构建新的div结构
var-gddTop=''；
//获取默认选中的选项
var whatSelected=$（curSel）.children（'option:selected'）.text（）；
//写入默认值
var gddFirst=''+whatSelected+'
；
//从原始的选项创建一个新的div选项数组
var addItems=新数组（）；
$（curSel）.children（'option'）.each（function（）{
var text=$（this.text（）；
var selVal=$（this.attr（'value'）；
变量before='
”；
添加项推送（前+文本+后）；
});
//从选项列表中隐藏默认值
var removeFirst=addItems.shift（）；
//创建div选择框的结尾并关闭所有内容
var gddBottom='
'
//在每个选择框后写下所有内容
var GDD=gddTop+gddFirst+addItems.join（“”）+gddBottom；
$（光标）。在（GDD）之后；
//该变量直接在每个原始变量之后选择div选择框
var nGDD=$（curSel.next（'div.selectME'）；
$（nGDD）.find（'li:first'）.addClass（“first”）；
$（nGDD）.find（'li:last'）.addClass（'last'）；
//处理单击功能-将结果推回旧文本框
$（nGDD）。单击（功能（e）{
var myTarA=$（e.target）.attr（'rel'）；
var myTarT=$（e.target）.text（）；
var myTar=$（e.target）；
//如果关闭，则打开
if（$（nGDD）.find（'li'）.css（'display'）='none'）
{
//下一行关闭可能打开的任何其他选择框
$（'div.selectME'）.find（'li'）.css（'display'，'none'）；
$（nGDD）.find（'li'）.css（'display'，'block'）；
//如果用户单击div选择框的off，则关闭整个程序
$（document.window | |“body”）。单击（函数（f）{
var myTar2=$（f.target）；
if（myTar2！==nGDD）{$（nGDD）.find（'li'）.css（'display'，'none'）；}
});
返回false；
}
其他的
{      
如果（myTarA==null）{
$（nGDD）.find（'li'）.css（'display'，'none'）；
返回false；
}
否则{
//设置旧选择框的值
$（curSel）.val（myTarA）；
//设置新文本的文本
$（nGDD）.find（'span.gselected'）.text（myTarT）；
$（nGDD）.find（'li'）.css（'display'，'none'）；
返回false；
}
}
//处理选项卡索引函数
}).focus（职能（e）{
$（nGDD）.find（'li:first'）.addClass（'currentDD'）；
$（nGDD）.find（'li:last'）.addClass（'lastDD'）；
功能检查键（e）{
//关于按键手柄功能
函数moveDown（）{
var current=$（nGDD）.find（'.currentDD:first'）；
var next=$（nGDD.find（'.currentDD'）.next（）；
如果（$（当前）.is（'.lastDD'））{
返回false；
}否则{
$（next）.addClass（'currentDD'）；
$（当前）.removeClass（'currentDD'）；
}
}
函数moveUp（）{
var current=$（nGDD）.find（'.currentDD:first'）；
var prev=$（nGDD）.find（'.currentDD'）.prev（）；
如果（$（当前）.is（'.first'））{
返回false；
}否则{
$（上一个）.addClass（'currentDD'）；
$（当前）.removeClass（'currentDD'）；
}
}
var curText=$（nGDD.find（'.currentDD:first'）.text（）；
var curVal=$（nGDD）.find（'.currentDD:first a'）.attr（'rel'）；
开关（如钥匙代码）{
案例40：
$（光标）.val（曲线）；
$（nGDD）.find（'span.gselected'）.text（curText）；
向下移动（）；
返回false；
打破
案例38：
$（光标）.val（曲线）；
$（nGDD）.find（'span.gselected'）.text（curText）；
moveUp（）；
返回false；
打破
案例13：
$（nGDD）.find（'li'）.css（'display'，'none'）；
}     
}
$（文档）.keydown（检查键）；
}).blur（函数（）{
$（文档）。解除绑定（'keydown'）；
});
});
});

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

如果结构是朝着

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

---

请重新格式化您的代码。很乱。

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