js 自定义的联动下拉框

 更新时间:2010年02月07日 12:40:13   作者:  
一直都嫌下拉框这个html控件难看,之前弄了个<div><ul><li></li></ul></div>版的下拉框.

觉得这个下拉框已经稍微能满足美观需求了,

 

这个是点出来的效果,写了键盘的方向键,回车,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实现图片预览功能

    基于JavaScript实现图片预览功能

    在本文中,我们将学习如何使用 JavaScript 实现一个简单的图片预览功能,我们将使用 HTML、CSS 和 JavaScript 来创建一个用户界面,用户可以输入图片 URL 并实时预览图片,感兴趣的小伙伴跟着小编一起来看看吧
    2024-07-07
  • Javascript玩转继承(一)

    Javascript玩转继承(一)

    最近一直在学Javascript,打算写一些文章,算做自己的学习心得吧,也可以算是学习笔记。没有系统的知识点,太基础的不想写,主要是写一些自己觉得有价值的地方
    2014-05-05
  • JS+html5制作简单音乐播放器

    JS+html5制作简单音乐播放器

    这篇文章主要为大家详细介绍了JS html5制作简单音乐播放器的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JS中循环遍历数组的几种常用方式总结

    JS中循环遍历数组的几种常用方式总结

    文章主要总结了 JS 中循环遍历数组的十二种常用方式,包括 for 循环(普通和优化版)、forEach、map、filter、for…of、for…in、find、findIndex、some、every、reduce 等,并对它们的特点、语法、优缺点、适用场景及返回值等进行了详细说明,需要的朋友可以参考下
    2025-01-01
  • 微信小程序实现留言板

    微信小程序实现留言板

    这篇文章主要为大家详细介绍了微信小程序实现留言板,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • javascript的BOM汇总

    javascript的BOM汇总

    本文给大家汇总了一些javascript的BOM相关方法,有需要的小伙伴可以参考下。
    2015-07-07
  • js实现在页面上弹出蒙板技巧简单实用

    js实现在页面上弹出蒙板技巧简单实用

    蒙板是两个div,其中popWindow样式的div用于遮住整个页面并半透明,感兴趣的朋友可以参考下哈,希望对你学习js蒙版有所帮助
    2013-04-04
  • js继承call()和apply()方法总结

    js继承call()和apply()方法总结

    本文介绍了js继承当中的call和apply方法,从定义到常用实例都做了分析,非常的实用,推荐给小伙伴们。
    2014-12-12
  • JavaScript加载速度优化方法

    JavaScript加载速度优化方法

    通过使用CDN、压缩、异步加载、尽可能的减少JavaScript文件大小、利用缓存机制、使用Vanilla JS、使用ES6特性、将JavaScript文件放到底部、减少对DOM的访问以及避免重复代码等方法,可以优化JavaScript文件的加载和执行速度,提供更好的用户体验和更高的性能
    2023-08-08
  • js查错流程归纳

    js查错流程归纳

    归纳是为了更好的理解。平时同事有问题找我帮忙解决问题,往往都是很小的问题,这种情况他们并不是缺乏解决问题的知识,而是需要找到问题的办法
    2012-05-05

最新评论