Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。它支持搜索，并且能直接影响原始的选择框，而原始的选择框是用作数据容器。通过该下拉列表框插件可以多选项进行分组，设置选项的图标，对选项进行搜索过滤，以及进行多选选择。 效果展示 源码下载 使用方法 使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css、jQuery和fm.selectator.jquery.js文件。 <link rel="stylesheet" href="fm.select...
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。 目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。 querySelector 和 querySelectorAll 在规范中定义了如下接口： module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); N...
先给大家看一看美化之后的效果图：CSS：.div-select {border: solid 1px #999;height: 40px;line-height: 40px;cursor: default; }.div-select-text {float: left;background-color: #fff;height: 100%;word-break: keep-all;overflow: hidden;cursor: default; }.div-select-text > div{padding: 3px;line-height: 34px;}.div-select-arrow {background-color: #fff;float: right;width: 40px;height: 100%;color: #999;cursor: d...
本文实例讲述了JS实现Select的option上下移动的方法。分享给大家供大家参考，具体如下： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> function UpOrDown(direct, selectId) {//direct : 1:Up, -1:Downvar obj = document.getElementById(selectId);var len = obj.length;var index = obj.selectedIndex;//如果：1.没有选中的项; 2.向上，但已是最上; 3.向下，但是最下，...
本文实例讲述了jQuery判断浏览器并动态调整select宽度的方法。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <mce:script src="jquery-1.4.4.js" mce_src="jquery-1.4.4.js" type="text/javascript"></mce:script> <mce:sc...
我们知道，一般select下拉框是只能选择的，不能用来输入内容的。而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时，我们可以让select变成text，允许用户输入想要的内容，同时还可以在输入的时候将包含关键字的项也列出来，供快速选择。查看演示效果 源码下载 本文将用实例和大家分享一款基于jQuery的下拉框插件，它允许用户输入内容，同时下拉选项中会及时匹配相关选项，支持键盘操作，还支持html选项内...
废话不多说了，直接给大家贴代码，具体代码如下所示： <html> <head><title></title><!--添加jquery--><script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script><script type="text/javascript">$(function () {createSelect("addSel");addOption("addSel", "first", "第一个数据");addOption("addSel", "secord", "第二个数据");addOption("addSel", "three", "第三个数据");addOption("addSel", "f...
废话不多说了，直接给大家贴代码，具体代码如下所示： <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></title> <!--添加jquery--> <script src="../Script/jQuery/jquery-...min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { createSelect("select", "...
最近开始学习数据结构。一点一点整理，希望能坚持下来。因为方向是前端，所以用JavaScript实现。 //sort排序 var testArr1=[3, 44, 38, 5, 47, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48]; var testArr2=[3, 44, 38, 5, 47, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48]; var testArr3=[3, 44, 38, 5, 47, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48]; testArr1.sort();//排序结果：[15, 19, 2, 26, 27, 3, 36, 38, 4, 44, 46, 47, 48, 5, 50] ...
两个这种组件，大体样式和功能基本相同，本文就来带领大家看看这两个组件的用法。 一、组件说明以及API 1、第一个组件——multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示，我们放在后面。 2、第二个组件——bootstrap-multiselect。这个组件风格和第一个非常相似，文档也挺全面。 二、Multiple-select组件 1、组件说明 这个组件需要的浏览器支持如下： IE 7+Chrome 8+Firefo...
在介绍select组件的时候，之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章，这两个组件的功能确实很强大，本文分享下select组件的一些用法和特性。 一些通用的单选、多选、分组等功能这里就不多做介绍了，multiselect这方面是强项。重点介绍下select2的一些特性效果： 一、特性效果 1、多选效果可以设置最多只能选几个2、图文结合的效果3、远程搜索功能（即在用户输入搜索内容时动态去后台取数据） 输入内容前输入...
本文实例讲述了jquery获取select选中值的方法。分享给大家供大家参考，具体如下： 误区： 以前一直以为jquery获取select中option被选中的文本值，是这样写的：代码如下:$("#s").text(); //获取所有option的文本值 实际上应该这样：代码如下:$("#s option:selected").text(); //获取选中的option的文本值 获取select中option的被选中的value值： $("#s").val(); $("#s option:selected").val();js获取select选中的值： var sel=docu...
本文实例讲述了js实现select下拉框菜单的详细代码。分享给大家供大家参考。具体如下： 运行效果截图如下：具体代码如下： <!DOCTYPE html><html><head><title></title><style type="text/css">#gridComboBox {background: #fff;border: 1px solid #2d78f4;border-radius: 2px;-moz-box-shadow: inset 0 0 4px #06c;-webkit-box-shadow: inset 0 0 4px #06c;box-shadow: inset 0 0 4px #06c;}</style> </head><body><input onclick=...
由于原生select在各个浏览器的样式不统一，特别是在IE67下直接不可以使用样式控制，当PM让你做一个样式的时候，那是相当的痛苦。最好的办法就是使用自定义样式仿select效果。这里写了一个jquery插件，实现自定义的select（阉割了不少原生select的事件，但是最主要的都还在） 需要引用的样式： .self-select-wrapper{ position: relative;display: inline-block;border: 1px solid #d0d0d0;width: 250px;height:40px;font-size: 14p...
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下： select选择框内容左右移动，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，运行效果图：具体代码如下 <!DOCTYPE html> <html> <head><meta charset="utf-8" /><title>index</title> </head> <body><div><select id="leftSelector" multiple="multiple" name="SmsListOnLeft" style="height:100px; width:50px"><option value="0">0...