首页html表格单元格嵌套的下拉列表点击时显示，点击别处时隐藏，当下拉列表显示时鼠标按下拖动时下拉列表不隐藏的代码

html表格单元格嵌套的下拉列表点击时显示，点击别处时隐藏，当下拉列表显示时鼠标按下拖动时下拉列表不隐藏的代码

时间: 2024-11-20 07:42:26 浏览: 16

在HTML和JavaScript中，我们可以使用`<select>`元素创建下拉列表，并结合CSS和事件监听来实现这样的功能。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .dropdown { position: absolute; display: none; /* 初始状态隐藏 */ min-width: 100px; /* 设置下拉框宽度 */ } </style> <script> window.onload = function() { var select = document.getElementById('dropdown'); var dropdown = document.getElementById('dropdown-list'); // 当单元格被点击时显示下拉列表 select.addEventListener('click', function() { dropdown.style.display = 'block'; }); // 鼠标离开下拉列表时隐藏 dropdown.addEventListener('mouseout', function() { if (!select.contains(event.relatedTarget)) { // 检查是否在select内 dropdown.style.display = 'none'; } }); // 阻止默认的鼠标选择效果，保持下拉列表打开 dropdown.onmousedown = function(e) { e.preventDefault(); this.style.outline = 'none'; // 取消选中效果 }; }; </script> </head> <body> <table> <tr> <td> <select id="dropdown" onfocus="this.select()">  <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </td> <td><div id="dropdown-list" class="dropdown"></div></td>  </tr> </table> </body> </html> ``` 在这个例子中，当用户点击`<select>`时，下拉列表会显示；当鼠标移出下拉列表时，如果鼠标不在`<select>`内，它就会隐藏。当鼠标按下并拖动下拉列表时，由于我们阻止了默认的鼠标选择效果，下拉列表不会自动关闭。

阅读全文