[前端刷题]select element&不用select element实现下拉菜单

最新推荐文章于 2025-06-26 05:39:57 发布

不吃虾米虾皮虾酱

最新推荐文章于 2025-06-26 05:39:57 发布

阅读量563

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端学习

本文链接：https://blog.youkuaiyun.com/qq_31989047/article/details/87903066

前端学习专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种不使用标准HTML select元素的下拉菜单实现方法，通过按钮和列表项的点击事件，改变按钮显示的文本，实现了类似下拉选择框的功能。提供了三种不同的实现方案，包括直接使用按钮和列表项，以及通过函数调用简化代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<select id="mySelect">
  <option>aaa</option>
  <option>bbb</option>
  <option>ccc</option>
  
</select>

</body>
</html>

https://jsbin.com/jofasev/edit?html,css,js,output

2.不使用select element

<html>
<head>
<script type="text/javascript">

</script>
</head>

<body>
<div id="first-id" class="first-class">
<input type="button" value="aaa" id="myButton"
onclick="alertValue()" />
<div id="second-id" class="second-class" >
      <ul >
        <li onclick="changeValuea()">aaa</li>
        <li onclick="changeValueb()">bbb</li>
        <li onclick="changeValuec()">ccc</li> 
      </ul>
    </div>
  </div>
</body>

</html>

.second-class {

  
  
  position:absolute;
  top:1.26em;
  left:-99em;
  
}
.second-class ul li{
  list-style-type:none;
  
  width:2.8em;
  border:1px solid #EE9A00;
  background-color:#E5E5E5;
}


.second-class ul li:hover {
  background-color:#EE9A00;
}

function alertValue()
{
  if(document.getElementById("second-id").style.left!="-1.8em"){
    document.getElementById("second-id").style.left="-1.8em";
  }
  else{
    
    document.getElementById("second-id").style.left="-99em";
  }
 
}

function changeValuea()
{
  document.getElementById("myButton").value="aaa" ;
  document.getElementById("second-id").style.left="-99em";
}
function changeValueb()
{
  document.getElementById("myButton").value="bbb" ;
  document.getElementById("second-id").style.left="-99em";
}
function changeValuec()
{
  document.getElementById("myButton").value="ccc" ;
  document.getElementById("second-id").style.left="-99em";
}

完全是傻瓜写法.

3.继续改进

<html>
<head>
<script type="text/javascript">

</script>
</head>

<body>
<div id="first-id" class="first-class">
  <button type="button" onclick="alertValue()">aaa</button>

<div id="second-id" class="second-class" >
      <ul >
        <li onclick="changeValue(0)">aaa</li>
        <li onclick="changeValue(1)">bbb</li>
        <li onclick="changeValue(2)">ccc</li> 
      </ul>
    </div>
  </div>
</body>

</html>

.second-class {
  position:absolute;
  top:1.26em;
  left:-99em; 
}
.second-class ul li{
  list-style-type:none;
  
  width:2.8em;
  border:1px solid #EE9A00;
  background-color:#E5E5E5;
}


.second-class ul li:hover {
  background-color:#EE9A00;
}

function alertValue()
{
  if(document.getElementById("second-id").style.left!="-1.8em"){
    document.getElementById("second-id").style.left="-1.8em";
  }
  else{
    
    document.getElementById("second-id").style.left="-99em";
  }
 
}

function changeValue(x)
{
  document.getElementsByTagName("BUTTON")[0].textContent=document.getElementsByTagName("li")[x].textContent ;
  document.getElementById("second-id").style.left="-99em";
}

https://jsbin.com/jofasev/edit?html,css,js