js实现select下拉框菜单

本文实例讲述了js实现select下拉框菜单的详细代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：
<！DOCTYPE html>

<html><head><title></title><style type="text/css"> #gridComboBox {background: #fff;border: 1px solid #2d78f4;border-radius: 2px;-moz-box-shadow: inset 0 0 4px #06c;-webkit-box-shadow: inset 0 0 4px #06c;box-shadow: inset 0 0 4px #06c;}</style></head><body><input onclick="doClick（this,"ddd（aa/bb/cc/erererer/dfdfdfdfdfdfdfdfdfdfdfdfdf/ejjejrjerjer//erererer ////////）eee"）" /><input onclick="doClick（this,"ddd（aa/bb/cc/erererer/dfdfdfdfdfdfdfdfdfdfdfdfdf/ejjejrjerjer//erererer ////////）eee"）" style="width: 300px;" /><p><b>Needed Properties:</b> sender.offsetTop & sender.offsetLeft & sender.offsetHeight</p></body></html><script type="text/javascript">function delGridComboBox（） { // 删除弹出框var divContainer = document.getElementById（"gridComboBox"）;if （divContainer） {divContainer.parentNode.removeChild（divContainer）;}}function doClick（sender, str） {//str="ddd（aa/bb/cc/erererer/dfdfdfdfdfdfdfdfdfdfdfdfdf/ejjejrjerjer//erererer ////////）eee" 只取（）得内容/分割做为数据源delGridComboBox（）;// console.log（sender）;// for（var i in sender） // {// console.log（i+"|"+sender[i]）;// }var re = /[^）（]*/g //取出（）中的内容作为下拉数据源var fit = str.match（re）;var fmt = fit[2].split（"/"）;var divContainer = document.createElement（"div"）;divContainer.style.width = sender.clientWidth + 2 + "px";divContainer.style.overflow = "hidden";divContainer.style.position = "absolute"; divContainer.style.top = sender.offsetTop + sender.offsetHeight + "px";divContainer.style.left = sender.offsetLeft + "px";divContainer.style.zIndex = 999;divContainer.id = "gridComboBox";for （var i = 0; i < fmt.length; i++） { console.log（"fmt[i]>>", fmt[i]）;var txt = document.createElement（"div"）; txt.innerHTML = fmt[i];txt.title = txt.innerHTML;txt.style.margin = 3+"px";txt.addEventListener（"mouseover", function changeBg（event） {event.target.style.fontWeight = "bold";event.target.style.color = "white";event.target.style.backgroundColor = "#2d78f4";}, false）;txt.addEventListener（"mouseout", function unChangeBg（event） {event.target.style.fontWeight = "normal";event.target.style.color = "black";event.target.style.backgroundColor = "white";}, false）;txt.onclick = function（subSender） {sender.value = subSender.target.innerText;delGridComboBox（）;};divContainer.appendChild（txt）;};document.body.appendChild（divContainer）;};</script>

以上就是js实现select下拉框菜单的代码，希望本文所述对大家学习javascript程序设计有所帮助。