觉得这个下拉框已经稍微能满足美观需求了， 这个是点出来的效果，写了键盘的方向键，回车，esc等 事件， 并且能根据页面的底部距离判断是否向上展示 今天弄了个联动的，顺便贴部分代码 效果预览： 以下代码解决了ie6的兼容问题复制代码 代码如下: $containerDivText.mousedown(function() { setTimeout( function() { if ($newUl[0].style.display == 'block') { $newUl.hide(); positionHideFix(); return false; } $containerDiv.focus(); //show list $newUl.slideDown(100); positionFix(); //when keys are pressed document.onkeydown = function(e) { if (e == null) { // ie var keycode = event.keyCode; } else { // everything else var keycode = e.which; } //enter key or esc key pressed, hide list if (keycode == 13 || keycode == 27) { $newUl.hide(); positionHideFix(); return false; } } }, 1); //the function settimeout is used for ie6, because if you click the element where you hava focused on the element, //ie6 would think you click it twice(2010-2-4) }); 以下代码解决了下拉框事件定义功能匮乏问题 代码 复制代码 代码如下: if (!opts.callbackfn) { $newLi.click(function(e) { var $clickedLi = jQuery(e.target), text = $clickedLi.text(); //update counter currentIndex = $newLi.index($clickedLi); //remove all hilites, then add hilite to selected item $newLi.removeClass('hiLite'); $clickedLi.addClass('hiLite'); setSelectText(text); $newUl.hide(); $containerDiv.css('position', 'static'); //ie }); } else { $newLi.click(function(e) { var $clickedLi = jQuery(e.target), text = $clickedLi.text(); //update counter currentIndex = $newLi.index($clickedLi); //remove all hilites, then add hilite to selected item $newLi.removeClass('hiLite'); $clickedLi.addClass('hiLite'); setSelectText(text); $newUl.hide(); $containerDiv.css('position', 'static'); //ie (opts.callbackfn)(this.value); }); } //param callbackfn means you can define a event function from every li in the ul;(2010-2-4) 然后是页面的应用， 代码 复制代码 代码如下: <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#my-dropdown2").hide(); jQuery('#my-dropdown1').sSelect( { defaultText: "", callbackfn: function(value) { if (value == 1) { jQuery("#my-dropdown2_list").parent().remove(); jQuery("#linkc_value").val(value); return; } jQuery.getJSON( '/Department.mvc/GetSubDepartment?DepartmentID=' + value, function(list) { jQuery("#my-dropdown2_list").parent().remove(); jQuery("#my-dropdown2").html(""); var temp = ""; temp += "<option value=''>请选择部门</option>"; for (var i = 0; i < list.length; i++) { temp += "<option value=" + list[i].DepartmentID + ">" + list[i].DepartmentName + "</option>"; } jQuery("#my-dropdown2").html(temp); jQuery("#my-dropdown2").show(); jQuery('#my-dropdown2').sSelect({ callbackfn: function(value) { jQuery("#linkc_value").val(value); } }); } ); } } ); // killErrors = function(){ return true; } // window.onerror = killErrors; }); function linkc() { location.href = "/User.mvc/Front?DepartmentID=" + jQuery("#linkc_value").val(); } </script> 这三块只是部分 但是花的时间较多 其它代码不贴了 有问题留言吧。。。

　　推荐阅读

　　JavaScript 精粹读书笔记(1,2)

第1章 精华 JavaScript的特性中有一部分特性带来的麻烦远远超出它们的价值。其中，一些特性是因为规范很不完善，从而可能导致可移植性的问题；一些特性会导致生成难以理解和修改的代码；一些特性促使我的代码风格过>>>详细阅读

本文标题：js 自定义的联动下拉框

地址：http://www.17bianji.com/kaifa2/JS/27105.html

 1/2    1