<!DOCTYPE html><html οnclick="hide();"><body><div οnclick="show(event);"><div id="r">选取结果</div><div id="s" style="position: absolute; display: none; z-index: 1;"><select id="sr" multiple="multiple" style="width: 100px;" οnclick="oSele_onclick(this);"><option value="volvo">volvo</option><option value="saab">saab</option><option value="opel">opel</option><option value="audi">audi</option></select></div></div><script>var arr = new Array();//初始选项值和方法开始var initText = "saab,opel";function init() {var oSele = document.getElementById("sr");var str = initText;for (i = 0; i < oSele.length; i++) {if (("," + str + ",").indexOf("," + oSele.options[i].text + ",") != -1) {oSele.options[i].selected = true;arr[i] = oSele.options[i].value;} else {arr[i] = "";}}}init();//初始选项值和方法结束//隐藏下拉框function hide() {document.getElementById("s").style.display = "none";console.log(selectMultiple("sr"));document.getElementById("r").innerHTML = selectMultiple("sr");}//显示下拉框function show(e) {e.stopImmediatePropagation();//阻止冒泡事件发生document.getElementById("s").style.display = "";}//获取选项值function selectMultiple(id) {var oSele = document.getElementById(id);var str = "";for (i = 0; i < oSele.length; i++) {if (oSele.options[i].selected) {str += oSele.options[i].value + ",";}}if (str == "") {return "请选择";} else {return str.substr(0, str.length - 1);}}//获取数组值function arrayString(str) {var str = "";for (i = 0; i < arr.length; i++) {str += arr[i] + ",";}return str}//设置选项值function oSele_selected(oSele) {var str = arrayString(arr);for (i = 0; i < oSele.length; i++) {if (("," + str).indexOf("," + oSele.options[i].text + ",") != -1) {oSele.options[i].selected = true;} else {oSele.options[i].selected = false;}}}//点击事件function oSele_onclick(oSele) {var i = oSele.selectedIndex;if (arr[i] == undefined || arr[i] == "") {arr[i] = oSele.value;} else {arr[i] = "";}oSele_selected(oSele);}</script></body></html>
