网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 javascript实现的一个带下拉框功能的文本框
范文
    这篇文章主要介绍了javascript实现的一个带下拉框功能的文本框,需要的朋友可以参考下
    有时我们需要一个可选的下拉框来选取内容，但是但是又有可以自定义输入的需求。对于这种需求，大部分网站使用的都是一个下拉框和一个 input text ，并列或分行给出选择。那么，我们希望它看上去像一个可以输入也可以选择的下拉框，那该如何做呢？
    其实我们可以通过 css position 定位及少许的 javascript 代码，模拟出来这种效果。
    代码如下:
    <!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">
    <select type="text" id="list-select">
    <option value="">
    新建
    </option>
    <option value="0">
    10-NGCFG-update-1000
    </option>
    <option value="1">
    11-NGCFG-update-1000
    </option>
    <option value="2">
    111
    </option>
    <option value="3">
    12-NGCFG-update-1000
    </option>
    <option value="4">
    13-NGCFG-update-1000
    </option>
    <option value="5">
    14-NGCFG-update-1000
    </option>
    <option value="6">
    15-NGCFG-update-1000
    </option>
    <option value="7">
    16-NGCFG-update-1000
    </option>
    <option value="8">
    17-NGCFG-update-1000
    </option>
    <option value="9">
    18-NGCFG-update-1257
    </option>
    <option value="10">
    2-NGCFG-update-100
    </option>
    <option value="11">
    3-NGCFG-update-150
    </option>
    <option value="12">
    4-NGCFG-update-200
    </option>
    <option value="13">
    5-NGCG-update-250
    </option>
    <option value="14">
    6-NGCFG-update-418
    </option>
    <option value="15">
    7-NGCFG-update-500
    </option>
    <option value="16">
    8-NGCFG-update-1000
    </option>
    <option value="17">
    9-NGCFG-update-1000
    </option>
    <option value="18">
    @ALL
    </option>
    <option value="19">
    @CNC-BJ-4
    </option>
    <option value="20">
    CNC-BJ--测试
    </option>
    <option value="21">
    test
    </option>
    </select>
    <input type="text" id="list-name-for-select">
    </div>
    <script>
    var listName = document.getElementById('list-name-for-select');
    var listSelect = 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>
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/19 19:48:44