html下拉单选框

最新推荐文章于 2024-05-03 11:17:45 发布

KkaBum

最新推荐文章于 2024-05-03 11:17:45 发布

阅读量2.9k

点赞数 1

文章标签： html5 javascript

本文链接：https://blog.csdn.net/KkaBum/article/details/124329732

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin:0;
            pading:0;

        }
        ul,li {
            list-style:none;
        }
        #ulDom {
            width: 100px;
            height: 100px;
            display: none;
        }
        #ulDom li {

        }

    </style>
</head>
<body>
<div>
    <input type="text" id="inputDom">
    <ul id="ulDom">
    </ul>
</div>
<script>
  let ulDom = document.getElementById('ulDom');
  let inputDom = document.getElementById('inputDom');
  let timer = null;
  inputDom.addEventListener('focus', function () {
    openSelect()
  })
  inputDom.addEventListener('input', function () {
    closeSelect();
    if(inputDom.value === ''){
     openSelect()
    }
  })

  ulDom.addEventListener('click', function (event) {
    console.log('0000')
    var e = event || window.event;
    var target = e.target || e.srcElement;
    console.log(target.innerHTML)
    inputDom.value = target.innerHTML;
    closeSelect()
  })
   inputDom.addEventListener('blur', function () {
    timer && clearTimeout(timer);
    timer = setTimeout(()=>{
      closeSelect();
    },300)

   })

  function openSelect() {
    ulDom.style.display = 'block';
  }

  function closeSelect() {
    ulDom.style.display = 'none';

  }

  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  for (let i = 0; i < arr.length; i++) {
    const liDom = document.createElement('li')
    liDom.innerHTML= arr[i];
    ulDom.appendChild(liDom);
  }
</script>
</body>
</html>

KkaBum

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html下拉单选框

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-
复制链接

扫一扫