现在位置: 首页 > 博客文章 > 电脑相关 > IT开发 > 开发语言 > Web > 正文
小 中 大
html中可以自定义输入的select下拉列表
2016年11月24日 10:22:47 ⁄ Web ⁄ 共 1774字 ⁄ 暂无评论 ⁄ 被围观 2,505次

在项目开发中，往往有这种需求：那就是需要下拉选择已有的数据列表，当没有自己需要的数据时，往往需要去管理这些列表数据的画面去添加，或者在下拉列表后面放一个快捷按钮，先添加，然后再选。

那么问题就来了，如果按照上面的操作，往往需要很多步骤，能不能当没有可选项目时，直接在下拉列表上输入呢？

答案是可以的。下面就是用 JS 实现了下拉列表上自定义选项的功能，请参考。

Code   ViewPrint
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>可编辑的下拉列表</title>
  5.     </head>
  6.     <style type="text/css">
  7.         .cls_select_span {
  8.             position:absolute;
  9.             border:1pt solid #c1c1c1;
  10.             overflow:hidden;
  11.             width:188px;
  12.             height:19px;
  13.             clip:rect(-1px 190px 190px 170px);
  14.         }
  16.         .cls_input_span {
  17.             position:absolute;
  18.             border-top:1pt solid #c1c1c1;
  19.             border-left:1pt solid #c1c1c1;
  20.             border-bottom:1pt solid #c1c1c1;
  21.             width:170px;
  22.             height:19px;
  23.         }
  25.         .cls_option_defined {
  26.             color:#c2c2c2;
  27.         }
  29.         .cls_select {
  30.             width:190px;
  31.             height:20px;
  32.             margin:-2px;
  33.         }
  35.         .cls_input {
  36.             width:170px;
  37.             height:15px;
  38.             border:0pt;
  39.         }
  40.     </style>
  42.     <body>
  44.     <span class="cls_select_span">
  45.         <select id="id_select" class="cls_select" onChange="selectOnChangeFunc()">
  46.             <option value="" class="cls_option_defined">---自定义---</option>
  47.             <option value="开发部">开发部</option>
  48.             <option value="市场部">市场部</option>
  49.             <option value="销售部">销售部</option>
  50.         </select>
  51.     </span>
  52.     <span class="cls_input_span">
  53.         <input type="text" id="id_input" class="cls_input" value="可选择也可自定义输入">
  54.     </span>
  56.     <script>
  57.         function selectOnChangeFunc() {
  58.             document.getElementById('id_input').value = document.getElementById('id_select').options[document.getElementById('id_select').selectedIndex].value;
  59.         }
  60.     </script>
  61.     </body>
  62. </html>

Good Luck！

分享到0
返回
Avatar photo

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. DJango 框架学习入门教程（一） —— DJango 框架简
  2. 38个基于Python的Web 开发框架
  3. 单独搭建一套WEB开发环境
  4. 用JavaSctipt保存div中的内容为图片
  5. Jframe开发的一些基本问题
  6. Linux系统搭建Web服务器
  7. 船舶报文系统项目之发布篇
  8. WordPress中添加置顶功能
WordPress音乐播放插件
你升级Win10了吗？
10张充满哲理和内涵的图片，满满的都是人生写照，且行且珍惜！
牛人箴言，时刻谨记
微软Edge急需解决的9个问题
Win10预览版坏消息：没激活码了
WordPress恢复链接管理功能
学英语应该学美音还是英音

给我留言

留言无头像?


插入图片

Copyright © 2010-2024 孟郎郎 辽ICP备19011093号