Home  >  Article  >  Web Front-end  >  select标签模拟/美化方法采用JS外挂式插件_jquery

select标签模拟/美化方法采用JS外挂式插件_jquery

WBOY
WBOYOriginal
2016-05-16 17:38:491388browse

在这将本人对,仅改变外观,不改变不干预Form行为,后期加载JS。(注:本脚本依赖jQuery)

啥也不说了,都在代码里。

复制代码 代码如下:
 
$(document).ready(function () {
// 找出需要美化的则将被忽略
var selects = $("select.beautify");
if (selects.length > 0) {
//先在代码底部增加一个
,用来承载和显示下拉框选项
$("body").append("");
//挨个美化呗
selects.each(function () {
//给本函数下的 this (也就是 , .dummy 将用于我们对此类 进行专门样式定义
//同时将 插入 dom, 紧跟原 ")
.attr("disabled", this.disabled)
.css("width", parseInt(this.style.width) + "px")
.css("display", this.style.display)
.insertAfter(this)
.val(this.options[this.selectedIndex].text);
//将 被点击时
input.click(function () {
//调出前面创建的
,并清空内容
//将 一致
$(select).hasClass("extend")
? div.css("width", "")
: div.css("width", $(this).innerWidth());
//将
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:点击隐藏页面左栏或右栏实现js代码_javascript技巧Next article:html组件不可输入(只读)同时任何组件都有效_jquery

Related articles

See more