提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript实现的一个带下拉框功能的文本框

JavaScript 实现 一个 功能 文本框 下拉框
2023-06-13 09:15:26 时间

有时我们需要一个可选的下拉框来选取内容，但是但是又有可以自定义输入的需求。对于这种需求，大部分网站使用的都是一个下拉框和一个inputtext，并列或分行给出选择。那么，我们希望它看上去像一个可以输入也可以选择的下拉框，那该如何做呢？

其实我们可以通过cssposition定位及少许的javascript代码，模拟出来这种效果。

复制代码代码如下:


<!DOCTYPEhtml>
<html>
<head>
 <title>可编辑可选择的下拉框</title>
 <metacharset="utf-8">
 <style>
  .list-name-input{
   color:#333;
   font-family:tahoma,"MicrosoftYaHei","SegoeUI",Arial,"MicrosoftYahei",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:0010px0;

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

   padding:4px6px;
   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#cccsolid;
   border-radius:4px;
   color:#555;
   cursor:pointer;
   height:30px;
   left:0px;
   margin:0010px0;
   padding:4px6px;
   position:absolute;
   top:0px;
   vertical-align:middle;
   white-space:pre;
   width:530px;
  }
 </style>
</head>
<body>
 <divid="list-name-input"class="list-name-input">
    <selecttype="text"class="list-select"id="list-select">
        <optionvalue="">
            新建
        </option>
        <optionvalue="0">
            10-NGCFG-update-1000
        </option>
        <optionvalue="1">
            11-NGCFG-update-1000
        </option>
        <optionvalue="2">
            111
        </option>
        <optionvalue="3">
            12-NGCFG-update-1000
        </option>
        <optionvalue="4">
            13-NGCFG-update-1000
        </option>
        <optionvalue="5">
            14-NGCFG-update-1000
        </option>
        <optionvalue="6">
            15-NGCFG-update-1000
        </option>
        <optionvalue="7">
            16-NGCFG-update-1000
        </option>
        <optionvalue="8">
            17-NGCFG-update-1000
        </option>
        <optionvalue="9">
            18-NGCFG-update-1257
        </option>
        <optionvalue="10">
            2-NGCFG-update-100
        </option>
        <optionvalue="11">
            3-NGCFG-update-150
        </option>
        <optionvalue="12">
            4-NGCFG-update-200
        </option>
        <optionvalue="13">
            5-NGCG-update-250
        </option>
        <optionvalue="14">
            6-NGCFG-update-418
        </option>
        <optionvalue="15">
            7-NGCFG-update-500
        </option>
        <optionvalue="16">
            8-NGCFG-update-1000
        </option>
        <optionvalue="17">
            9-NGCFG-update-1000
        </option>
        <optionvalue="18">
            @ALL
        </option>
        <optionvalue="19">
            @CNC-BJ-4
        </option>
        <optionvalue="20">
            CNC-BJ--测试
        </option>
        <optionvalue="21">
            test
        </option>
    </select>
    <inputtype="text"class="nameitem-widthlist-name-for-select"id="list-name-for-select">
 </div>

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

相关文章