可编辑可选择的下拉框

最新推荐文章于 2024-04-27 09:43:38 发布

艳妮子Yeah

最新推荐文章于 2024-04-27 09:43:38 发布

阅读量8.2k

点赞数 4

分类专栏： javascript html

本文链接：https://blog.csdn.net/wangxiuyan0228/article/details/80734729

版权

javascript 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

需求说明：创建一个下拉框，选择option后，可以对选中的内容进行编辑，如下图

实现思路：用一个input视线编辑功能，border隐藏，在视觉上认为是selet实现编辑功能。select触发change事件时，将value(选中的option)填入到input中

代码：

<!DOCTYPE html>
<html>
<head>
 <title>可编辑可选择的下拉框</title>
 <meta charset="utf-8">
 <style>
  .list-name-input{
   color: #333;
   font-family: tahoma, 'Microsoft YaHei', 'Segoe UI', Arial, 'Microsoft Yahei', Simsun, sans-serif;
   font-size: 15px;
   font-weight: bold;
   height: 50px;
   margin: 0px;
   padding: 0px;
   position: relative;
   width: 530px;
  }
  .list-name-for-select{
   border: 0;
   color: #555;
   height: 20px;
   lighting-color: rgb(255, 255, 255);
   line-height: 20px;
   margin:0 0 10px 0;

   outline-color: #555;
   outline-offset: 0px;
   outline-style: none;
   outline-width: 0px;

   padding: 4px 6px;
   position: absolute;
   top: 1px;
   left: 3px;
   vertical-align: middle;
   width: 486px;
  }
  .list-name-input-for-select:focus{
   border: 0;
   border-radius: 0;
  }
  .list-select{
   background-color: #FFF;
   border:1px #ccc solid;
   border-radius: 4px;
   color: #555;
   cursor: pointer;
   height: 30px;
   left: 0px;
   margin:0 0 10px 0;
   padding: 4px 6px;
   position: absolute;
   top: 0px;
   vertical-align: middle;
   white-space: pre;
   width: 530px;
  }
 </style>
</head>
<body>
 <div id="list-name-input" class="list-name-input">
     <select type="text" class="list-select" id="list-select">
         <option value="0">
             TEST-A
         </option>
         <option value="1">
             TEST-B
         </option>
         <option value="2">
             TEST-C
         </option>
         <option value="3">
             TEST-D
         </option>
     </select>
     <input type="text" class="name item-width list-name-for-select" id="list-name-for-select">
 </div>

 <script>
  var listName = document.getElementById('list-name-for-select');
  document.getElementById('list-select').onchange = function(e){
   if(this.value){
    listName.value = this.value + ' | ' + this.options[this.selectedIndex].text;
   }else{
    listName.value = ''
   }
  };
 </script>
</body>
</html>

艳妮子Yeah

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
可编辑可选择的下拉框

需求说明：创建一个下拉框，选择option后，可以对选中的内容进行编辑，如下图实现思路：用一个input视线编辑功能，border隐藏，在视觉上认为是selet实现编辑功能。select触发change事件时，将value(选中的option)填入到input中代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;可编辑可...
复制链接

扫一扫

专栏目录