js模拟select控件

思路：
设置一个select容器，把select放在里面并且设置隐藏，放置一个存放选中的文本值，使用ul列表代替option。当列表元素触发click的时候设置对应的option设置选中，并且给select设置value

此次项目select控件是cms生成出来的从前端无法调整样式，所以只能考虑使用js模拟，代码匆忙中完成并未精简，如有更好的方案，还原共同讨论。

案例地址：
http://build2.baiwanx.com.cn/shtzwl201804111782/wsmxztz/index_145.html

具体代码：
HTML结构

<div class="select"><span class="placeholder">我是卖家</span><select id="18444" name="18444"><option value="">==请选择==</option><option value="我是卖家">我是卖家</option><option value="我是买家">我是买家</option></select><dl class="dl"></dl>
</div>

js代码

$('.select').each(function(){var placeholder = $(this).find(".placeholder"),list = $(this).find(".dl"),select = $(this).find("select"),item = select.find("option"),str = '';//获取select的列表组合作为ul的列表item.not(item.first()).each(function(i){str += "<dd value='" + $(this).attr("value") + "'>" + $(this).text() + "</dd>"});list.html(str);//初始化selectplaceholder.text(list.find("dd:first").text());item.eq(1).attr("selected","selected");select.attr("value",list.find("dd:first").attr("value"));
});//绑定click事件
$('.select').on('click', '.placeholder', function(e) {var parent = $(this).closest('.select');if (!parent.hasClass('is-open')) {parent.addClass('is-open');$('.select.is-open').not(parent).removeClass('is-open');} else {parent.removeClass('is-open');}e.stopPropagation();
}).on('click', 'dl>dd', function() {  //列表绑定click事件var parent = $(this).closest('.select'),select = parent.find("select"),i = $(this).index();parent.removeClass('is-open').find('.placeholder').text($(this).text()).attr("value",$(this).attr("value"));select.attr("value",$(this).attr("value"));select.find("option").eq(i+1).attr("selected","selected");
});$('body').on('click', function() {$('.select.is-open').removeClass('is-open');
});

js模拟select控件相关推荐

菜单向上拉html,模拟select控件，CSS上拉菜单
模拟select控件,CSS下拉菜单模拟select控件 html,body{height:100%;overflow:hidden;} body,div,form,h2,ul,li{margin: ...
html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...
jquery 操作服务端控件,select 控件
<asp:DropDownList ID="ddl" runat="server"></asp:DropDownList> <se ...
以编程方式在ASP.NET MVC中使用多个HTML Select控件
目录介绍使用代码使用JQuery 使用Razor和C# 兴趣点介绍很多时候,我们使用JavaScript或JQuery代码来操纵HTML控件,却不知道ASP.NET MVC与Razor和C# ...
四种常见的浏览器内核简介----JS城市选择控件
一四种常见的浏览器内核简介 Gecko: Gecko: Netscape6开始采用的内核,后来的Mozilla FireFox (火狐浏览器) 也采用了该内核,Gecko的特点是代码完全公开,因此, ...
仿苹果 html5 combox,模仿combox(select)控件，不用为美化select烦恼了。
模仿combox(select)控件,不用为美化select烦恼了. 来源:中文源码网浏览: 次日期:2018年9月2日模仿combox(select)控件,不用为美化select烦 ...
html 控件坐标定位,利用JS改变html控件位置
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 利用JS改变html控件位置我想写一个贪吃蛇小游戏,所以需要完成蛇的自动移动效果,这就需要改变html控件位置.本来我 ...
ocx js php,JS实现OCX控件的事件响应示例_javascript技巧
JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自身肯定是可以实现的,JS提供的这种 ...
JS给html控件赋值
<html> <head><title> JS给html控件赋值 </title><script language="javascrip ...
JavaScript操作select控件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

js模拟select控件

js模拟select控件相关推荐

最新文章

热门文章