カスタムスタイルの選択ボックス

Question

www.gerrendesign.com/entry_images/selectboxdemo.zipからカスタムスタイルの選択ボックスにjavascriptを使用しようとしています。選択ボックスの1つにたくさんの項目がありますが、作成する必要がありますスクロール機能の

この選択ボックスは、ほとんどすべての古いブラウザや新しいブラウザと互換性があります。上記のリンク/添付ファイルでスクロールを追加する方法を提案または解決する必要があります - 選択ボックスにたくさんのエントリ（都市、州、為替レートの例など）が入っている場合

ここに貼り付けられています...ご協力 イワン

ため おかげで、これはコードです：

$(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の、内部のリストをレンダリングすることができ）。仮定デフォルトのスクロールバーがokです...

を構造が

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