js 自定義的聯(lián)動下拉框

更新時間：2010年02月07日 12:40:13 作者：

一直都嫌下拉框這個html控件難看，之前弄了個<div><ul><li></li></ul></div>版的下拉框.

覺得這個下拉框已經(jīng)稍微能滿足美觀需求了，

這個是點出來的效果，寫了鍵盤的方向鍵，回車，esc等事件，并且能根據(jù)頁面的底部距離判斷是否向上展示

今天弄了個聯(lián)動的，順便貼部分代碼

效果預(yù)覽：

以下代碼解決了ie6的兼容問題

復(fù)制代碼代碼如下:

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

以下代碼解決了下拉框事件定義功能匱乏問題
代碼

復(fù)制代碼代碼如下:

 
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) 

然后是頁面的應(yīng)用，

代碼

復(fù)制代碼代碼如下:

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