以下是如何通过构建自己的下拉处理程序来实现此目的的示例。
CSS
.select {
width: 10em;
height: 1em;
border-style: solid;
border-width: 1px;
border-radius: 3px;
z-index: 0;
}
.gradient1 {
background-color: #ebebeb;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ebebeb), to(#999999));
background-image: -webkit-linear-gradient(top, #ebebeb, #999999);
background-image: -moz-linear-gradient(top, #ebebeb, #999999);
background-image: -ms-linear-gradient(top, #ebebeb, #999999);
background-image: -o-linear-gradient(top, #ebebeb, #999999);
}
.gradient2 {
background-color: #999999;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ebebeb), to(#ebebeb));
background-image: -webkit-linear-gradient(top, #999999, #ebebeb);
background-image: -moz-linear-gradient(top, #999999, #ebebeb);
background-image: -ms-linear-gradient(top, #999999, #ebebeb);
background-image: -o-linear-gradient(top, #999999, #ebebeb);
}
.list {
position: relative;
margin-left: -1px;
padding: 0% 0% 0% 1px;
width: 100%;
height: auto;
box-shadow: 0px 5px 10px #888888;
border-style: solid;
border-width: 1px;
border-radius: 3px;
background-color: #ebebeb;
display: none;
margin-top: -4px;
z-index: 2;
}
.option {
display: block;
list-style-type: none;
text-align: left;
}
.option:hover {
background-color: blue;
}
.arrowDown {
position: relative;
top: -50%;
left: 90%;
width: 0%;
height: 0%;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #444;
}
.value {
position: relative;
top: -2px;
left: 0%;
width: 100%;
height: 100%;
z-index: 1;
}
HTML
-
one
-
two
-
three
-
four
-
five
-
six
-
seven
-
eight
-
nine
Get Text value 1
Get HTML value 2
Get Text value 3
的Javascript
(function (global) {
global.addEventListener(“load”, function onLoad() {
global.removeEventListener(“load”, onLoad);
var selects = document.getElementsByClassName(“select”);
function getTextValue(selectId) {
var select = document.getElementById(selectId),
values,
text = “”;
if (select) {
values = select.getElementsByClassName(“value”);
if (values && values.length) {
text = values[0].textContent;
}
}
return text;
}
function getHTMLValue(selectId) {
var select = document.getElementById(selectId),
values,
html = “”;
if (select) {
values = select.getElementsByClassName(“value”);
if (values && values.length) {
html = values[0].innerHTML;
}
}
return html;
}
function hideAll(not) {
Array.prototype.forEach.call(selects, function (select) {
if (select !== not) {
Array.prototype.forEach.call(select.getElementsByClassName(“list”), function (ul) {
ul.style.display = “none”;
});
select.className = (select.className.replace(/gradient[12]/, “”).trim() + ” gradient1″).trim();
}
});
}
document.addEventListener(“click”, hideAll, false);
Array.prototype.forEach.call(selects, function (select) {
select.className = (select.className.trim() + ” gradient1″).trim();
var lists = select.getElementsByClassName(“list”),
options,
values,
value;
if (lists && lists.length) {
options = lists[0].getElementsByClassName(“option”);
if (options && options.length) {
values = select.getElementsByClassName(“value”);
if (values && values.length) {
value = values[0];
value.innerHTML = options[0].innerHTML;
Array.prototype.forEach.call(options, function (option) {
option.addEventListener(“click”, function clickOption() {
value.innerHTML = this.innerHTML;
}, false);
});
}
}
}
select.addEventListener(“click”, function clickSelect(evt) {
evt.stopPropagation();
hideAll(this)
var lists = this.getElementsByClassName(“list”),
list;
if (lists && lists.length) {
list = lists[0];
if (global.getComputedStyle(list).display === “none”) {
list.style.display = “block”;
} else {
list.style.display = “none”;
}
}
if (this.className.indexOf(“gradient1”) !== -1) {
this.className = this.className.replace(“gradient1”, “gradient2”);
} else {
this.className = (this.className.replace(/gradient\d/, “”).trim() + ” gradient1″).trim();
}
}, false);
});
document.getElementById(“getValue1”).addEventListener(“click”, function () {
console.log(getTextValue(“first”));
}, false);
document.getElementById(“getValue2”).addEventListener(“click”, function () {
console.log(getHTMLValue(“second”));
}, false);
document.getElementById(“getValue3”).addEventListener(“click”, function () {
console.log(getTextValue(“third”));
}, false);
}, false);
}(window));