js实现select下拉框菜单

前端技术 2023/09/06 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/17315

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案