自写select下拉框,样式随意改

合集下载

CSS自定义select下拉选择框（不用其他标签模拟）

CSS⾃定义select下拉选择框（不⽤其他标签模拟）今天群⾥有⼈问到怎么⾃定义select下拉选择框的样式，于是群⾥就展开了激烈的讨论，刚开始⼀直就是考虑怎样使⽤纯CSS实现，把浏览器默认的样式覆盖掉，但最后均因兼容问题处理不好⽽失败告终，最后的解决⽅案就是⽤其他的元素（如ul,li）模拟下拉菜单，或者是使⽤⽹上⼀些现成的插件。

其实select这个东西只靠纯CSS是不能解决这个⾃定义样式问题的，但既然折腾了这么久，还是说⼀下CSS实现的思路吧。

⾸先对于默认的样式：刚开始想到使⽤背景，但经试验对select设置背景是⽆效的，于是后来就想到了覆盖，⽤其它元素把那个向下的箭头盖住，然后给这个元素设置背景，写了个demo发现可⾏，于是就有了下⾯的这些。

⾸先⽤⼀个a标签套住select：<a class="btn-select" id="btn_select"><select><option>选项⼀</option><option>选项⼆</option><option>选项三</option><option>选项四</option><option>选项五</option></select></a>在css⾥让select“隐藏”，但不能display:none;，不然select元素不存在了，在这⾥我们可以把select的透明度改为0，这样就看不见了，但并不影响下拉框，点击时下拉框还会出现；这样貌似是可⾏了，但这是会发现每次选择选项后，选项并未显⽰，这就是select隐藏的原因了，连着⽂字也隐藏了，因此我们需要⼀个额外的标签储存每次选择的选项，下⾯是完整的HTML代码：<form><a class="btn-select" id="btn_select"><span class="cur-select">请选择</span><select><option>选项⼀</option><option>选项⼆</option><option>选项三</option><option>选项四</option><option>选项五</option></select></a></form>CSS代码：* {margin: 0;padding: 0;}body {padding: 50px 50px;}.btn-select {position: relative;display: inline-block;width: 150px;height: 25px;background-color: #f80;font: 14px/20px "Microsoft YaHei";color: #fff;}.btn-select .cur-select {position: absolute;display: block;width: 150px;height: 25px;line-height: 25px;background: #f80 url(ico-arrow.png) no-repeat 125px center;text-indent: 10px;}.btn-select:hover .cur-select {background-color: #f90;}.btn-select select {position: absolute;top: 0;left: 0;width: 150px;height: 25px;opacity: 0;filter: alpha(opacity: 0;);font: 14px/20px "Microsoft YaHei";color: #f80;}.btn-select select option {text-indent: 10px;}.btn-select select option:hover {background-color: #f80;color: #fff;}最后效果是这样的(Chrome上的截图)：但这样做并不能完全覆盖浏览器的默认样式，如图中下拉框的边框处理不掉，另外，在ie上就更难看了，所以真正项⽬中使⽤的话，还是⽤插件吧，或者⽤其他元素代替。

element下拉框整体样式修改

element下拉框整体样式修改组件⾥的下拉框el-select是这样的：<div class="the_national"> <el-select v-model="value"> <el-option v-for="item in options":key="item.value":label="bel":value="item.value"class="provinces_select" > </el-option> </el-select></div><style lang="scss" scoped>.the_national {cursor: pointer;font-size: 24px;font-weight: 500;font-family: "PingFang SC";text-align: center;padding-top: 15px;::v-deep input::-webkit-input-placeholder {color: #fff;}::v-deep input::-moz-input-placeholder {color: #fff;}::v-deep input::-ms-input-placeholder {color: #fff;}// input框-::v-deep .el-select,::v-deep .el-input,::v-deep .el-input__inner {width: 120px;background-color: rgba(0, 0, 0, 0.2);color: #106393;border: 0px;border-radius: 0px;font-size: 24px;}// input框-右侧的箭头-::v-deep .el-select .el-input .el-select__caret {color: #106393;}// option选项-上⾯的箭头::v-deep.el-popper[x-placement^="bottom"] .popper__.arrow::before {border: none !important;z-index: 999;}::v-deep.el-popper[x-placement^="bottom"] .popper__arrow::after {border: none !important;z-index: 999;}::v-deep.popper__arrow {border: none;}// option选项-最外层::v-deep.el-select-dropdown {border: none !important;background: #192f4a !important;z-index: 999;}// option选项-⽂字样式::v-deep.el-select-dropdown__item {color: rgba(255, 255, 255, 0.55) !important;z-index: 999;}// 移⼊option选项-样式调整::v-deep.el-select-dropdown__item.hover{background-color: rgba(255,255,255,0.1);color: rgba(255, 255, 255, 0.9) !important;z-index: 999;}}</style>如果option样式不⽣效，可以在标签中加上<el-select :popper-append-to-body="false">如果是vue3可把样式中的::v-deep改成。

select下拉框option的样式修改

select下拉框option的样式修改select原样式：进⾏样式修改后的样式：附上修改代码：//select外⾯必须包裹⼀个div,⽤来覆盖select原有的样式<div class="option"><select name=""><option value=" ">筛选实验类型</option><option value="实验1">实验1</option><option value="实验2">实验2</option></select></div>css:.option{/*⽤div的样式代替select的样式*/margin: 100px;width: 140px;height: 40px;/*border-radius: 5px;*//*盒⼦阴影修饰作⽤,⾃⼰随意*//* box-shadow: 0 0 5px #ccc;*/border: 1px solid #cccccc;position: relative;}.option select{/*清除select的边框样式*/border: none;/*清除select聚焦时候的边框颜⾊*/outline: none;/*将select的宽⾼等于div的宽⾼*/width: 100%;height: 40px;line-height: 40px;/*隐藏select的下拉图标*/appearance: none;-webkit-appearance: none;-moz-appearance: none;/*通过padding-left的值让⽂字居中*/padding-left: 20px;}/*使⽤伪类给select添加⾃⼰想⽤的图标*/.option:after{content: "";width: 14px;height: 8px;background: url(../assets/arrow-down.png) no-repeat center;/*通过定位将图标放在合适的位置*/position: absolute;right: 20px;top: 41%;/*给⾃定义的图标实现点击下来功能*/pointer-events: none;}但是有个问题；option的样式没办法修改；我各种百度搜索，没有搜索出如何修改其样式；因为option是html固有元素;因⽽⽆论怎么修改在浏览器上都是不起作⽤的。

html中可以自定义输入的select下拉列表

html中可以⾃定义输⼊的select下拉列表在项⽬开发中，往往有这种需求：那就是需要下拉选择已有的数据列表，当没有⾃⼰需要的数据时，往往需要去管理这些列表数据的画⾯去添加，或者在下拉列表后⾯放⼀个快捷按钮，先添加，然后再选。

那么问题就来了，如果按照上⾯的操作，往往需要很多步骤，能不能当没有可选项⽬时，直接在下拉列表上输⼊呢？答案是可以的。

下⾯就是⽤ JS 实现了下拉列表上⾃定义选项的功能，请参考。

<!DOCTYPE html><html><head><title>可编辑的下拉列表</title></head><style type="text/css">.cls_select_span {position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);}.cls_input_span {position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;}.cls_option_defined {color:#c2c2c2;}.cls_select {width:190px;height:20px;margin:-2px;}.cls_input {width:170px;height:15px;border:0pt;}</style><body><span class="cls_select_span"><select id="id_select" class="cls_select" onChange="selectOnChangeFunc()"><option value="" class="cls_option_defined">---⾃定义---</option><option value="开发部">开发部</option><option value="市场部">市场部</option><option value="销售部">销售部</option></select></span><span class="cls_input_span"><input type="text" id="id_input" class="cls_input" value="可选择也可⾃定义输⼊"></span><script>function selectOnChangeFunc() {document.getElementById('id_input').value = document.getElementById('id_select').options[document.getElementById('id_select').selectedIndex].value;}</script></body></html>。

多选下拉框（select下拉多选）

多选下拉框（select下拉多选）⽅法⼀：使⽤.js和 .css实现HTML代码： <select id='checkedLevel' style="width:120px;height:28px;" multiple="multiple"> <option value="1">选项1</option> <option value="2">选项1</option> <option value="3">选项1</option> <option value="4">选项1</option> <option value="5">选项1</option> <option value="6">选项1</option> <option value="7">选项1</option> </select>js代码： $('#checkedLevel').multipleSelect({ addTitle: true, //⿏标点悬停在下拉框时是否显⽰被选中的值 selectAll: false, //是否显⽰全部复选框，默认显⽰ name: "质控级别", selectAllText: "选择全部", //选择全部的复选框的text值 allSelected: "全部", //全部选中后显⽰的值 //delimiter: ', ', //多个值直接的间隔符，默认是逗号 placeholder: "质控级别" //不选择时下拉框显⽰的内容 });//设置默认选中:其中数组中多个值⽤逗号分隔，值是option的value $("#checkedLevel").multipleSelect('setSelects', [1001,1002]);设置选中后关闭下拉框：$('#selectJcjb').multipleSelect("close");//其他的⽅法，可到js中去查看⽅法名，根据实际情况进⾏调⽤。

div模仿select下拉框

div模仿select下拉框由于css不能修改select option的样式，使⽤起来不灵活，所以写⼀个⽤div效仿的select下拉框。

html<div class="aside__status-text___3dXKm"><span><div class="status_circle status_circle_online"></div>在线</span></div><ul id="" value=""class="selectBoxs"><li value=""><div class="status_circle status_circle_online"></div>在线</li><li value=""><div class="status_circle status_circle_hide"></div>隐⾝</li></ul>css.selectBoxs{background-color: rgb(255, 255, 255);padding: 10px;line-height: 20px;position: absolute;top: 119px;z-index: 19920829;border-radius: 3px;text-overflow: ellipsis;word-break: keep-all;overflow: hidden;white-space: nowrap;border: 0;width: 100%;color: #989898;appearance:none;-moz-appearance:none;-webkit-appearance:none;display: none;}.status_circle{display: inline-block;width: 8px;height: 8px;background-color: #30cc80;border-radius: 50%;margin-right: 7px;}.status_circle_hide{background-color: orange;}js<script src="../js/jquery-1.11.0.min.js"></script><script>// 切换在线状态var selectBox = $('.selectBoxs'); //下拉框var selectlist = $('.selectBoxs li'); var stuate = $('.aside__status-text___3dXKm span'); //点击状态stuate.click(function () {selectBox.show();})selectlist.click(function () {selectBox.hide();$(this).parent().prev().find("span").html($(this).html());})</script>先隐藏ul下拉框盒⼦，点击状态时显⽰下拉框，选中列表时把列表的内容传⼊显⽰的状态上，prev()是查找相邻兄弟的前⼀个，find()查找到，html()赋予；。

使用js实现一个可编辑的select下拉列表

使⽤js实现⼀个可编辑的select下拉列表复制代码代码如下:<select id="name" name="name"onkeydown="clearSelect(this,event);"onkeypress="writeSelect(this,event);" style="width:70px;"><option value=""></option><option value="test1">test1</option><option value="test2">test2</option><option value="test3">test3</option></select><script>function clearSelect(obj,e){opt = obj.options[0];opt.selected = "selected";if((e.keyCode== 8) ||(e.charCode==8))//使⽤退格（backspace）键实现逐字删除的编辑功能{opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0);opt.text = opt.value;}if((e.keyCode== 46) ||(e.charCode==46))//使⽤删除（Delete）键实现逐字删除的编辑功能{opt.value = "";opt.text = opt.value;}//还可以实现其他按键的响应}function writeSelect(obj,e){opt = obj.options[0];opt.selected = "selected";opt.value += String.fromCharCode(e.charCode||e.keyCode);opt.text = opt.value;}function forbidBackSpace()//为了在IE中，避免backspace的返回上⼀页功能，和本下拉框的编辑功能冲突，需要禁掉backspace的功能。

美化select下拉框

ul.tag_options{position:absolute; top:32px;margin:0;list-style:none;background:#fff;padding:0 0 1px;margin:0;width: 145px;overflow:hidden; overflow-y:auto; font-size:14px;cursor:pointer; z-index:1000 ; border:1px solid #C8C8C8; border-top:none;}
ul.tag_options li.open_hover , ul.tag_options li.open_selected{background:#eee;color:#404040; font-weight:normal; font-size:14px}
上面的样式请根据实际情况改写.
$(function(){ $("select").selectCss();
}) </script>
*使用时必须引用jquery
$("select")是选取所有的下拉框,根据自己实际情况更改.
2.调整样式: /*下拉框样式*/ .tag_select,.tag_select_hover,.tag_select_open{display:inline-block;width:130px;height:30px;background:url("../images/sel_bg.png") 120px center no-repeat;padding:0 0 0 15px;line-height:30px;color:#8border:1px solid #dedede}

jQuery制作简洁的多级联动Select下拉框

jQuery制作简洁的多级联动Select下拉框今天我们要来分享⼀款很实⽤的jQuery插件，它是⼀个基于jQuery多级联动的省市地区Select下拉框，并且值得⼀提的是，这款联动下拉框是经过⾃定义美化过的，外观⽐浏览器⾃带的要漂亮许多。

另外，这个Select下拉框也可以绑定下拉事件，并获取当前选中项的值。

html代码：复制代码代码如下:<div class="wrap"><div class="nice-select" name="nice-select"><input type="text" value="==选择省份==" readonly><ul><li data-value="1">湖北省</li><li data-value="2">⼴东省</li><li data-value="3">湖南省</li><li data-value="4">四川省</li></ul></div><div class="h20"></div><div class="nice-select" name="nice-select"><input type="text" value="==选择城市==" readonly><ul><li data-value="1">武汉市</li><li data-value="2">深圳市</li><li data-value="3">长沙市</li><li data-value="4">成都市</li></ul></div><div class="h20"></div><div class="nice-select" name="nice-select"><input type="text" value="==选择区县==" readonly><ul><li data-value="1">蔡甸区</li><li data-value="2">南⼭区</li><li data-value="3">⾬花区</li><li data-value="4">武侯区</li></ul></div></div><script type="text/javascript" src="js/jquery.js"></script><script>$('[name="nice-select"]').click(function (e) {$('[name="nice-select"]').find('ul').hide();$(this).find('ul').show();e.stopPropagation();});$('[name="nice-select"] li').hover(function (e) {$(this).toggleClass('on');e.stopPropagation();});$('[name="nice-select"] li').click(function (e) {var val = $(this).text();var dataVal = $(this).attr("data-value");$(this).parents('[name="nice-select"]').find('input').val(val);$('[name="nice-select"] ul').hide();e.stopPropagation();alert("中⽂值是：" + val);alert("数字值是：" + dataVal);//alert($(this).parents('[name="nice-select"]').find('input').val()); });$(document).click(function () {$('[name="nice-select"] ul').hide();});</script>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/a2.jpg) 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 li.on{background-color: #e0e0e0;}代码很简洁，我这⾥就不多做解释了，⼩伙伴们⾃⼰预览下就知道效果是多麽的简洁⼤⽅了，⾮常实⽤。

div自定义下拉框组件

div⾃定义下拉框组件因为原⽣的下拉框不能修改其属性，很难美化下拉框。

所以⾃⼰⽤div简单⾃定义了⼀下下拉框，想美化直接修改css即可<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>div模仿下拉框</title><style>*{padding: 0;margin: 0;}.select-box{width: 200px;margin: 50px auto;text-align: left;text-indent: 5px;/* border: 1px solid #ccc; */padding: 10px;}.select-box .select-title{height: 30px;line-height: 30px;display: block;margin-bottom: 10px;border: 1px solid #ccc;padding: 5px 10px;cursor:pointer;}.select-box ul{border: 1px solid #ccc;}.select-box ul li{height: 30px;line-height: 30px;list-style: none;padding: 5px 10px;cursor: pointer;}.select-box ul li.current{background: #ebebeb;}.select-box ul li:not(:last-of-type){border-bottom: 1px solid #ccc;}.none{display: none;}.block{display: block;}</style></head><body><div class="select-box"><span class="select-title">web前端</span><ul class="select-con none"><li>web前端</li><li>php</li><li>java</li><li>ios</li><li>安卓</li></ul></div><script src="jquery-3.0.0.min.js"></script><script>$(document).bind("click",function(e){var clickMe=$(e.target);/*获取点击元素*/ if(!clickMe.hasClass("select-title")){/*点击元素不是下拉框标题时*/ $(".select-box ul").addClass("none").removeClass("block"); if(clickMe.parent().hasClass("select-con")){/*点击元素是下拉选项时*/ var currenLiHtml=clickMe.html();/*获取点击的下拉选项HTML*/ clickMe.parent().siblings(".select-title").html(currenLiHtml);/*把点击的下拉选项HTML放到下拉标题*/ clickMe.addClass("current").siblings().removeClass("current");/*给点击的下拉选项加背景⾊*/ } }else if(clickMe.siblings(".select-con").hasClass("none")){/*点击下拉标题时如果有none类的话*/ clickMe.parents("body").find(".select-con").addClass("none").removeClass("block");/*点击下拉标题时如果有none类的话,全部下拉关闭，然后在展开当前的下拉*/ clickMe.siblings(".select-con").addClass("block").removeClass("none"); }else if(clickMe.siblings(".select-con").hasClass("block")){/*点击下拉标题时如果有block类下拉是展开的话*/ $(".select-box ul").addClass("none").removeClass("block"); }})</script></body></html>。

微信小程序自定义select下拉选项框组件的实现代码

微信⼩程序⾃定义select下拉选项框组件的实现代码知识点：组件，animation，获取当前点击元素的索引与内容微信⼩程序中没有select下拉选项框，所以只有⾃定义。

⾃定义的话，可以选择模板的⽅式，也可以选择组件的⽅式来创建。

这次我选择了组件，这样只需引⼊组件和添加数据，其它的不⽤管，就能实现多个地⽅重复使⽤了。

第⼀步：创建组件所需的⽂件我喜欢把共⽤的内容都放在和pages⽂件同级的地⽅，所以有了下⾯的⽬录结构（1）先创建⼀个⾃定义名字的⽂件夹，例如我上⾯的Componet（2）再创建⼀个select⽂件夹，然后：右键这个⽂件夹，新建下⾯的这个Component。

然后输⼊需要创建的名称，我这⾥为了⽅便就取了select的名字。

然后就会⾃动创建4个⽂件，js、json、wxml、wxss。

第⼆步：开始配置组件注意：如果通过第⼀步创建的可直接跳过第⼆步。

（1）通过第⼀步创建的组件的⽂件夹中，已经⾃动配置好了。

只需在引⼊组件的时候，在引⼊组件的页⾯的json⽂件中配置组件的名称和组件的位置。

（2）如果⾃⼰⼿动创建组件的js、json、wxml、wxss这个⽂件，那么需要在json⽂件中填⼊ "component": true 表⽰⾃定义组件声明。

js⽂件中也需要写成这种格式：Component({properties: {// 这⾥定义了innerText属性，属性值可以在组件使⽤时指定innerText: {type: String,value: 'default value',}},data: {// 这⾥是⼀些组件内部数据someData: {}},methods: {// 这⾥是⼀个⾃定义⽅法customMethod: function(){}}})第三步：⾃定义组件样式及js。

注意：这⾥可以在 app.json 的 pages 中把组件所在的页⾯放到第⼀位，这样就能在组件的页⾯编写代码了，⽐如我上⾯的⽬录结构：就需要写成 "Componet/select/select", 后⾯再是其它的页⾯。

jquery美化select，自定义下拉框样式

jquery美化select，⾃定义下拉框样式select默认的样式⽐较丑，有些应⽤需要美化select，在⽹上找到⼀个很好的美化样式效果，本⼈很喜欢，在这⾥分享⼀下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>select美化⾃定义下拉框样式</title></head><body><style type="text/css">*{margin:0;padding:0;}select{outline:none;}ul{list-style:none;}a{text-decoration:none;}select{display: none;}.select_box{font-family: "宋体"; font-size: 12px;color: #999999;width: 178px;line-height: 20px;margin: 50px auto;}.select_showbox{border: 1px solid #b0a296;height: 20px;padding-left: 5px;/*background: url(img/icon.png) no-repeat 156px 0;可以替换成想要的下拉三⾓*/background: #ccc;} .select_option{border: 1px solid #b0a296;border-top: none;display: none;}.select_option li{padding-left: 5px;}.select_option li.selected{background-color: #F3F3F3;color: #999;}.select_option li.hover{background: #7b6959; color: #fff;}</style><select name="choose" id="choose"><option value="选择风格" selected="selected">选择风格</option><option value="复古风">复古风</option><option value="摇滚风">摇滚风</option><option value="怀旧风">怀旧风</option></select><script src="/ajaxjs/jquery-1.7.2.min.js"></script><script type="text/javascript">(function($){var selects=$('select');//获取selectfor(var i=0;i<selects.length;i++){createSelect(selects[i],i);}function createSelect(select_container,index){//创建select容器，class为select_box，插⼊到select标签前var tag_select=$('<div></div>');//div相当于select标签tag_select.attr('class','select_box');tag_select.insertBefore(select_container);//显⽰框class为select_showbox,插⼊到创建的tag_select中var select_showbox=$('<div></div>');//显⽰框select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);//创建option容器，class为select_option，插⼊到创建的tag_select中var ul_option=$('<ul></ul>');//创建option列表ul_option.attr('class','select_option');ul_option.appendTo(tag_select);createOptions(index,ul_option);//创建option//点击显⽰框tag_select.toggle(function(){ul_option.show();},function(){ul_option.hide();});var li_option=ul_option.find('li');li_option.on('click',function(){$(this).addClass('selected').siblings().removeClass('selected');var value=$(this).text();select_showbox.text(value);ul_option.hide();});li_option.hover(function(){$(this).addClass('hover').siblings().removeClass('hover');},function(){li_option.removeClass('hover');});}function createOptions(index,ul_list){//获取被选中的元素并将其值赋值到显⽰框中var options=selects.eq(index).find('option'),selected_option=options.filter(':selected'),selected_index=selected_option.index(),showbox=ul_list.prev();showbox.text(selected_option.text());//为每个option建⽴个li并赋值for(var n=0;n<options.length;n++){var tag_option=$('<li></li>'),//li相当于optiontxt_option=options.eq(n).text();tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list);//为被选中的元素添加class为selectedif(n==selected_index){tag_option.attr('class','selected');}}}})(jQuery)</script><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div></body></html>效果如下：。

MUI自定义selectdown下拉框

MUI⾃定义selectdown下拉框//⼀级联动数据var data1=[{value:'01',text:'⾝份证'},{value:'02',text:'学⽣证'},{value:'03',text:'护照'},{value:'03',text:'驾照'}];//⼆级联动数据var data2=[{value:'01',text:'按样品名称分类',children:[{value:'0101',text:'苹果'},{value:'0102',text:'梨⼦'},{value:'0103',text:'⾹蕉'},{value:'0104',text:'菠萝'},{value:'0105',text:'桃⼦'}]},{value:'02',text:'按样品所在商城分',children:[{value:'0201',text:'天猫'},{value:'0202',text:'淘宝'},{value:'0203',text:'苏宁'},{value:'0204',text:'京东'}]},{value:'03',text:'按样品⼤⼩分',children:[{value:'0301',text:'⼩的'},{value:'0302',text:'中等'},{value:'0303',text:'⼤的'}]},];//三级联动数据var data3=[{value: '110000',text: '北京市',children:[{value: "0101",text: "北京市",children:[{value: "110101",text: "东城区"},{value: "110230",text: "其它区"}]}]},{value: '120000',text: '天津市',children:[{value: "120100",text: "天津市",children:[{value: "120101",text: "和平区"},{value: "120226",text: "其它区"}]}]},{value: '130000',text: '河北省',children:[{value: "130100",text: "⽯家庄市",children: [{value: "130102",text: "长安区"},{value: "130103",text: "桥东区"},{value: "130104",text: "桥西区"},{value: "130186",text: "其它区"}]},]}];function dataPicker(data,layerNum,pickerObj){ var dataPicker=new mui.PopPicker({ layer:layerNum }); var resultObj=pickerObj.getElementsByTagName("input")[0]; dataPicker.setData(data); dataPicker.show(function(items){ if(layerNum==1){ resultObj.setAttribute("value",items[0].text); tabCheck(); } if(layerNum==2){ resultObj.setAttribute("value",items[0].text+ " " + items[1].text); } if(layerNum==3){ resultObj.setAttribute("value",items[0].text+ " " + items[1].text+" "+ items[2].text); } });}function timePicker(pickerObj){ var optionJson=pickerObj.getAttribute('data-options') || '{}'; var options=JSON.parse(optionJson); var timePicker = new mui.DtPicker(options); var resultObj=pickerObj.getElementsByTagName("input")[0]; timePicker.show(function(rs){ resultObj.setAttribute("value",rs.text); timePicker.dispose(); });}function tabCheck(){ if($("#picker1").val()=="不动产权证号"){ $(".check1").show(); $(".check2").hide(); $(".exampleBox").show(); $(".exampleBox").find("a").attr("href","#img-pop1"); }else if($("#picker1").val()=="⽼权证号"){ $(".check1").hide(); $(".check2").show(); $(".exampleBox").show(); $(".exampleBox").find("a").attr("href","#img-pop2"); }else{ $(".check1").hide(); $(".check2").hide(); $(".exampleBox").hide(); }}。

改变HTML下拉框SELECT选项的多种方法

∙∙当前位置: 主页 > 网页制作 > HTML/Xhtml >改变HTML下拉框SELECT选项的多种方法来源：互联网作者：佚名时间：12-30 17:00:57【大中小】点评：提交表单后返回的HTML页面重新渲染，SELECT控件的value和selectedIndex 属性都无法使下拉框保留提交表单前的状态,接下来将和大家分享改变HTML下拉框选项的方法,感兴趣的朋友可以研究下提交表单后返回的HTML页面重新渲染，SELECT控件的value和selectedIndex属性都无法使下拉框保留提交表单前的状态。

复制代码代码如下:<SELECT id="idState" style="width:150" name="state" selectedIndex="$!{s tate}"><OPTION value="">全部</OPTION><OPTION value="1">通过</OPTION><OPTION value="2">末通过</OPTION><OPTION value="3">待处理</OPTION></SELECT>一种临时的解决方案是在vm文件末尾加上一段脚本为下拉框赋值：复制代码代码如下:<script>$('#idState').val('$!{state}');</script>另一种方案是设置默认选中项：复制代码代码如下:<SELECT id="idState" style="width:150" name="state" value="$!{state}"> <OPTION value="">全部</OPTION><OPTION value="1">通过</OPTION><OPTION value="2" SELECTED>末通过</OPTION><OPTION value="3">待处理</OPTION></SELECT>用VTL的写法就是：复制代码代码如下:<SELECT id="idState" style="width:150" name="state" value="$!{state}"> <OPTION value="">全部</OPTION><OPTION #if($!{state} == 1) SELECTED #end value="1">通过</OPTION> <OPTION #if($!{state} == 2) SELECTED #end value="2">末通过</OPTIO N><OPTION #if($!{state} == 3) SELECTED #end value="3">待处理</OPTIO N></SELECT>这里要注意的是：进行==比较时，Velocity是区分类型的，如果用字符串“1”、“2”、“3”比较会始终得到false。

js自定义select下拉框美化特效

js⾃定义select下拉框美化特效select的默认样式往往很丑，为保证页⾯样式风格统⼀，需要对select进⾏美化。

虽然其美化的插件很多，⼀搜⼀⼤把，但是需要引⼊长长的css⽂件和js⽂件实在是件头痛的事。

其实select的实现原理很简单，就是⼀个点击切换显⽰和隐藏并传值的过程。

⽤jquery模拟了，样式想怎么写就怎么写，且不限数量。

朴素的效果：html：<div class="select_box"><font>›</font><span>选项1</span><ul><li>选项1</li><li>选项2</li><li>选项3</li></ul></div><div class="select_box"><font>›</font><span>选项⼀</span><ul><li>选项⼀</li><li>选项⼆</li><li>选项三</li></ul></div>css：ul{ margin:0; padding:0; list-style:none;}.select_box{ width:200px; height:36px; border:1px solid #3CF; position:relative; float:left; margin-right:50px;}.select_box span{ display:inline-block; width:200px; height:36px; line-height:36px; cursor:pointer; text-indent:10px;}.select_box .span_aa{ color:#C36;}.select_box ul{ width:200px; position:absolute; top:36px; left:-1px; border:1px solid #3CF; display:none; background:#fff;}.select_box li{ cursor:pointer; line-height:36px; text-indent:10px;}.select_box li:hover{ background:#39F; color:#fff;}.select_box font{ position:absolute; right:10px; font-size:26px; font-family:"微软雅⿊"; color:#3CF; transform:rotate(90deg);}js：$(function(){var s_title=$(".select_box span");var s_select=$(".select_box li");s_title.click(function(e){$(this).addClass("span_aa");$(this).next("ul").show();e.stopPropagation();});s_select.click(function(){var s_text=$(this).html();var s_title_2=$(this).parent('ul').prev("span");s_title_2.html(s_text).removeClass("span_aa");$(this).parent('ul').hide();});$(document).click(function(){s_title.removeClass("span_aa");$(".select_box ul").hide();});});源码下载：如果⼤家还想深⼊学习，可以点击、进⾏学习。

elementui中select自定义

ElementUI是一款基于Vue.js的开源UI框架，拥有丰富的组件库，其中包括了select组件。

而select组件是常用的下拉选择框，但在实际项目中，我们可能会遇到需要自定义select组件的情况，本文将围绕这一主题展开讨论。

1. 自定义select样式在ElementUI中，select组件的样式是可以通过CSS来进行自定义的。

我们可以通过设置类名的方式来添加自定义样式，比如改变字体颜色、背景颜色、边框样式等。

我们还可以利用scoped样式来实现局部样式的自定义，以确保样式只对当前组件生效。

2. 自定义select下拉选项在一些特定的业务场景中，我们可能需要对select下拉选项进行自定义。

ElementUI提供了slot的方式来实现这一功能，我们可以自定义下拉选项的内容和样式，同时也可以通过JavaScript来动态控制下拉选项的显示。

3. 自定义select的远程搜索在某些情况下，我们需要对select组件进行远程搜索，以便用户能够快速定位所需的选项。

在ElementUI中，通过使用远程搜索的方法，可以对select组件的查询行为进行自定义，从而满足特定的搜索需求。

4. 自定义select的多选功能除了单选下拉框外，有时我们还会需要实现多选的功能。

ElementUI中的select组件同样可以进行自定义，使其支持多选操作。

这样可以增强用户体验，提高操作效率。

以上是对ElementUI中select自定义的一些常见需求和方法，通过自定义select的样式、下拉选项、远程搜索和多选功能，可以满足不同项目的个性化需求。

但需要注意的是，在自定义过程中，我们应该充分考虑用户体验和可维护性，避免过度定制导致的不必要麻烦。

在我看来，对于自定义select组件，我们应该根据项目需求和用户体验来进行灵活的选择，避免过度定制和不必要的复杂化。

在实际开发中，我们还需要不断地学习和探索，以便更好地应对不同的需求和挑战。

自定义下拉选择框select控件

⾃定义下拉选择框select控件
互联换⽕热，主要是互联⽹满⾜了⽤户的需求，⽹民越来越多，对⽤户体验的要求就越来越⾼，对UI设计的要求也越来越⾼。

在各⼤公司的互联⽹门中，⼤家基本都有⾃⼰的 ui库，⽽且已经到了基本的html元素了。

为了满⾜个⼦业务的需求，这个也在所难免。

今天分享⼀个html中的选择框控件，知识来⾃于互联⽹，⼤家⼀起学习。

该插件基本实现了所有下拉选择框的需求，可⽤于⼤型交互业务型⽹站。

1.单选下拉
2.多选下拉
3.复杂单选
4.复杂多选
5.复杂多选筛选
6.简单多选筛选
7.单选⾃动模糊匹配
8.多选⾃动模糊匹配
以上是html中基本的⼏种下拉选择框的需求情况。

下⾯附上源码，点击，⼤家⼀起学习。

自定义标签的简单实用例子-生成下拉菜单1

1,首先建立配置文件afrom.tld<?xml version="1.0"encoding="UTF-8"?><!DOCTYPE taglib PUBLIC"-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN""/j2ee/dtds/web-jsptaglibrary_1_1.dtd"><taglib><tlibversion>1.0</tlibversion><jspversion>1.1</jspversion><shortname>d</shortname><uri>/selecta</uri><tag><name>select</name><tagclass>com.dhcc.struts.SelectTage</tagclass><!—引用java类--><bodycontent>JSP</bodycontent><attribute><name>name</name><required>true</required><!—是否是必选属性--><rtexprvalue>true</rtexprvalue><!—是否是接受表达式--> </attribute><attribute><name>dicttypeid</name><rtexprvalue>true</rtexprvalue></attribute><attribute><name>classType</name></attribute><attribute><name>size</name></attribute><attribute><name>style</name></attribute><attribute><name>id</name></attribute><attribute><name>title</name></attribute><attribute><name>defalut</name></attribute></tag></taglib>2,建立java类page com.dhcc.strutsimportjava.io.IOException;importjava.sql.Connection;importjava.sql.PreparedStatement;importjava.sql.ResultSet;importjava.sql.SQLException;importjavax.servlet.jsp.JspException;importjavax.servlet.jsp.JspWriter;importjavax.servlet.jsp.tagext.TagSupport;public class SelectTage extends TagSupport{private String name;private String dicttypeid;//默认选中值加样式private String id;private String classType;private String size;private String title;private String style;private String defalut;publicSelectTage() {}@OverridepublicintdoStartTag() throws JspException {//在这里也可以查询数据库得到一个集合，将value和值放入select标签try {//得到所有值在选中JspWriter writer = pageContext.getOut();writer.write("<select name='" + name +"'> \r\n\t\t");writer.write("<option value='' ");writer.write("请选择...");writer.write("</option>\r\n\t\t");writer.write("<option value='0' ");if(0==Integer.valueOf(defalut)){writer.write(" selected ");}writer.write(">男");writer.write("</option>\r\n\t\t");writer.write("<option value='1' ");if(1==Integer.valueOf(defalut)){writer.write(" selected ");}writer.write(">女");writer.write("</option>\r\n\t\t");writer.write("</select>");} catch (IOExceptionioe) {}return SKIP_BODY;}@OverridepublicintdoEndTag() throws JspException { // TODO Auto-generated method stubreturnsuper.doEndTag();}public String getName() {return name;}public void setName(String name) { = name;}public String getDicttypeid() {returndicttypeid;}public void setDicttypeid(String dicttypeid) { this.dicttypeid = dicttypeid;}public String getId() {return id;}public void setId(String id) {this.id = id;}public String getClassType() {returnclassType;}public void setClassType(String classType) { this.classType = classType;}public String getSize() {return size;}public void setSize(String size) {this.size = size;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public String getStyle() {return style;}public void setStyle(String style) {this.style = style;}public String getDefalut() {returndefalut;}public void setDefalut(String defalut) {this.defalut = defalut;}}3,在jsp页面使用<%@ tagliburi="/selecta " prefix="d"%><d:select name="aa" defalut="0"></d:select>在此处有其他属性可以自己查看效果4,效果已经出来，查看生成的源代码，以免有错误可以修改<select name='aa'><option value='' 请选择...</option><option value='0' selected >男</option><option value='1' >女</option></select>。

如何定义Select下拉框的边框颜色和滚动条样式

<tr><td value="">新浪</td></tr>
<tr><td value="">搜狐</td></tr>
<tr><td value="">网易</td></tr>
<tr><td value="">亿唐</td></tr>
</tr>
</table>
</td>
</tr>
<tr>
<td><div id="oOption" onselectstart="return false">
<table cellsapcing="0" cellspadding="3" border="0" width="100%">
}
</script>
<style>
body,td{font-size:12px}
.over{color:#dedede}
.out{color:#333333}
#oOption{
scrollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#C1C1BB;
</style>
<table width="75" border="0" cellspacing="0" cellpadding="0">

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>资讯管理</title><script type="text/javascript"src="js/jquery.js" ></script><link rel="stylesheet" type="text/css" href="css/base.css"/><link rel="stylesheet" type="text/css" href="css/common.css"/><style type="text/css">body,div,p{margin: 0px;padding: 0px;font-size: 12px;font-family: "Microsoft Yahei","Verdana",Arial;vertical-align: baseline;color: #333333;/*IE6防抖*/_background-image:url(about:blank);_background-attachment:fixed;}textarea,select,input{border:1px solid #cbd7e0;outline: none;padding-left: 8px;font-family: "Microsoft Yahei";font-size: 12px;color: #333333;}body{background-color: #f1f1f1;}.container{}.content{width: 1050px;border: 1px solid #e6e6e6;background-color: #fff;position: relative;}.title{font-size: 16px;color: #667281;margin-left: 16px;margin-bottom: 10px;}.selec{width: 135px;height: 30px;}/*.content_detail option{display: inline-block;width: 100px;}*/.content input:focus{border: 1px solid #93a5b3;}select:focus{border: 1px solid #93a5b3;}.contentIE6{position: relative;top: 25px;left: 15px;}.content_detail{padding-left: 15px;margin-top: 25px;border-bottom: 1px solid #f2f2f2;_position: relative;_top:5px;_left:15px;}.content_detail div{height: 45px;}.content_detail .subhead{height: 85px;}.subhead{position: relative;}.subhead span{position: relative;top: -45px;}.subheadtext{width: 362px;height: 50px;outline: none;resize: none;padding-top: 8px;}.content .content_detail .subheadIE6{ position: relative;top: 50px;left: 15px;}.content textarea:focus{border: 1px solid #93a5b3;}.content_detail .main{height: 140px;position: relative;}.main span{position: relative;top: -95px;_position: absolute;_top: 15px;_left: 0px;_height:20px;}.maintext{width: 362px;height: 106px;resize: none;padding-top: 8px;_position: absolute;_left: 80px;_top: 0px;}.content_title input{width: 362px;height: 30px;border:1px solid #cbd7e0;}.author input{width: 362px;height: 30px;border:1px solid #cbd7e0;}.auniu{position: relative;}.anniu a{display: inline-block;height: 30px;line-height: 30px;border: 1px solid #dcdcdc;width: 116px;margin-right: 8px;text-align: center;margin-top: 12px;margin-bottom: 12px;position: relative;left: 666px;border-radius: 2px;cursor: pointer;}.preview{background-color: #e6e6e6;}.preview:hover{background-color: #d3d3d3;}.makepage{color: #fff;background-color: #8294be;}.makepage:hover{background-color: #7386b3;}.publish{color: #fff;background-color: #6cc9b6;}.publish:hover{background-color: #5ec0ac;}/*下拉列表框*/.select_p{position: relative;}.select_box{display: inline-block;width: 135px;height: 30px;border: 1px solid #cbd7e0;vertical-align: middle;}.select_box span{display: inline-block;width: 91px;height: 22px;border-right: 1px solid #cbd7e0;vertical-align: top;padding-left: 8px;padding-top: 8px;cursor:default;}.channelhide{position: absolute;display: inline-block;background-color: #fff;width: 99px;border: 1px solid #cbd7e0;border-top: none;top: 32px;left: 88px;z-index: 20;}.channelhide p{cursor: pointer;line-height: 24px;padding-left: 8px;cursor: pointer;}.channelhide p:hover{background-color: #eee;}</style><script type="text/javascript">$(function(){$("#channelhide").hide();$("#programa").hide();var channeldefault=$("#channeldefault").html();$("#channeltext").html(channeldefault);var programadefault=$("#programadefault").html();$("#programatext").html(programadefault);$(document).click(function(e){e = window.event || e; // 兼容IE7obj = $(e.srcElement || e.target);if ($(obj).is("#channelbox,#channelbox *")) {// alert('内部区域');} else {$("#channelhide").hide();}});$(document).click(function(e){e = window.event || e; // 兼容IE7obj = $(e.srcElement || e.target);if ($(obj).is("#programabox,#programabox *")) {// alert('内部区域');} else {$("#programa").hide();}});if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {// $(".ie6_img").attr("src","images/ie6_img.jpg");$("#subhead span").addClass("subheadIE6");$(".content_detail").addClass("contentIE6");}})function channelShowHide(){$("#channelhide").toggle();}function programaShowHide(){$("#programa").toggle();}function selectchannel(node){$("#channelhide").hide();$("#channeltext").html($(node).html());}function selectprograma(node){$("#programa").hide();$("#programatext").html($(node).html());}</script></head><body><div class="container"><p class="title">资讯管理</p><div class="content"><div class="content_detail"><div class="select_p">频道：<span id="channelbox" class="select_box"><span id="channeltext" onclick="channelShowHide()"></span><img onclick="channelShowHide()" src="images/select_img.png"/></span><span id="channelhide" class="channelhide"><p id="channeldefault" onclick="selectchannel(this)">帮助中心</p><p onclick="selectchannel(this)">活动中心</p><p onclick="selectchannel(this)">信息中心</p></span></div><div class="select_p">栏目：<span id="programabox" class="select_box"><span id="programatext" onclick="programaShowHide()">开奖信息</span><img onclick="programaShowHide()" src="images/select_img.png"/></span><span id="programa" class="channelhide"><p id="programadefault" onclick="selectprograma(this)">开奖信息</p><p onclick="selectprograma(this)">开奖奖项</p><p onclick="selectprograma(this)">所有彩票</p></span></div><div class="content_title">标题：<input type="text" value="朝圣之旅开奖01期：xxxx" /></div><div id="subhead" class="subhead"><span>副标题：</span><textarea class="subheadtext">113°46'～114°37'</textarea></div><div class="author">作者：<input type="text"/></div><div>是否有效：<input type="radio" name="valid" value="valid" checked="checked"/>有效<input class="ml30" type="radio" name="valid" value="unvalid"/> 无效</div><div>是否置顶：<input type="radio" name="top" value="valid" checked="checked"/>置顶<input class="ml30" type="radio" name="top" value="unvalid"/>不置顶</div><div>是否显示在首页：<input type="radio" name="show" value="valid" checked="checked"/>显示<input class="ml30" type="radio" name="show" value="valid"/>不显示</div><div class="main"><span>正文：</span><textarea class="maintext"></textarea></div></div><div class="anniu"><a class="preview">预览</a><a class="makepage">生成页面</a><a class="publish">发布到idc</a></div></div></div></body></html>。