腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

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

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

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

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

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

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

效果預(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=''>請(qǐng)選擇部門</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> 