2023年7月9日发(作者：)

jQuery制作简洁的多级联动Select下拉框今天我们要来分享⼀款很实⽤的jQuery插件，它是⼀个基于jQuery多级联动的省市地区Select下拉框，并且值得⼀提的是，这款联动下拉框是经过⾃定义美化过的，外观⽐浏览器⾃带的要漂亮许多。另外，这个Select下拉框也可以绑定下拉事件，并获取当前选中项的值。html代码：复制代码 代码如下:

css代码：复制代码 代码如下: body { color: #555; font-size: 14px; font-family: "微软雅⿊" , "Microsoft Yahei"; background-color: #EEE; } a { color: #555; } a:hover { color: #f00; } input { font-size: 14px; font-family: "微软雅⿊" , "Microsoft Yahei"; } .wrap { width: 500px; margin: 100px auto; } .h20 { height: 20px; overflow: hidden; clear: both; } .nice-select { width: 245px; padding: 0 10px; height: 38px; border: 1px solid #999; position: relative; box-shadow: 0 0 5px #999; background: #fff url(images/) no-repeat right center; cursor: pointer; } .nice-select input { display: block; width: 100%; height: 38px; line-height: 38px 9; border: 0; outline: 0; background: none; cursor: pointer; } .nice-select ul { width: 100%; display: none; position: absolute; left: -1px; top: 38px; overflow: hidden; background-color: #fff; max-height: 150px; overflow-y: auto; border: 1px solid #999; border-top: 0; box-shadow: 0 3px 5px #999; z-index: 9999; } .nice-select ul li { height: 30px; line-height: 30px; overflow: hidden; padding: 0 10px; cursor: pointer; } .nice-select ul { background-color: #e0e0e0; }代码很简洁，我这⾥就不多做解释了，⼩伙伴们⾃⼰预览下就知道效果是多麽的简洁⼤⽅了，⾮常实⽤。