自定義樣式的選擇框

Question

我試圖使用JavaScript自定義風格的選擇框從www.gerrendesign.com/entry_images/selectboxdemo.zip ，因爲我有很多條目裏面的選擇框之一我需要做的但我被卡在創造的滾動功能。

由於這個選擇框與幾乎所有的舊的和新的瀏覽器兼容。我只需要建議或解決方案如何在上面這個鏈接/附加文件添加滾動 - 如果選擇框中，填入大量條目（例如城市，州或匯率...）

我堅持在這裏... 謝謝您的合作 伊萬

THIS IS CODE：

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