下拉多选框勾选效果
代码语言:html
所属分类:表单美化
代码描述:下拉多选框勾选效果采用jquery及combox插件实现
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { use(["combox"], function() { var data = [{ id: "1", text: "选项1" }, { id: "2", text: "选项2" }, { id: "3", text: "选项3" }, { id: "4", text: "选项4" }, { id: "5", text: "选项5" }, { id: "7", text: "选项3" }, { id: "8", text: "选项4" }, { id: "9", text: "选项5" }] $("#combox1").combox({ id: "id", name: "text", data: data, valueChange: function(data) { //返回data,filterData,selectData } }) var cb1 = $("#combox1").data('combox'); function getSelect() { alert(JSON.stringify(cb1.options.selectData)); } }); }); </script> <style> * { box-sizing: border-box; } ul, li { padding: 0; margin: 0; list-style: none; } .combox-box { width: 160px; height: 24px; border: 1px solid #ccc; cursor: pointer; overflow: hidden; font-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0