可选择和输入的下拉列表框示例

代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可选择和输入的下拉列表框</title>
<style type="text/css">
div,span,p,td,font{font-size:9pt;}
</style>
</head>
<body>

<table cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td align="left">
<!--select标签和input外面的span标签的格式是为了使两个位置在同一位置，控制位置-->
<span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);">
<select name="aabb" id="aabb" style="width:190px;height:20px;margin:-2px;"
onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">
<!--下面的option的样式是为了使字体为灰色，只是视觉问题，看起来像是注释一样-->
<option value="" style="color:#c2c2c2;">---请选择---</option>
<option value="闲人书库">闲人书库</option>
<option value="闲人BLOG">闲人BLOG</option>
<option value="闲人设计">闲人设计</option>
<option value="闲人软件">闲人软件</option>
</select>
</span>
<span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">
<input type="text" name="ccdd" id="ccdd" value="可选择也可输入的下拉框" style="width:170px;height:15px;border:0pt;">
</span>

</td></tr></table>

</body>

</html>

注意注释的位置。

赞 (0)

相关推荐

  • javascript为下拉列表动态添加数据项

    javascript为下拉列表添加数据项.html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>为下拉列表动态添加数据项<

  • jQuery插件datalist实现很好看的input下拉列表

    HTML5中定义了一种input框很好看的下拉列表--datalist,然而目前它的支持性并不好(万恶的IE,好在你要渐渐退役了...).于是最近更据需求写了一个小型datalist插件,兼容到IE8(IE7应该没多少人用了吧?).实现的具体需求如下: 当被选中的时候(触发blur焦点)(不管是鼠标还是tab键)清空input框并且显示自定义的下拉列表,然后可以用键盘的上下键选择(鼠标当然肯定没理由不可以啦),单击鼠标左键或者enter键将选中的列表的值输入到input框. 具体的实现代码如下:

  • jquery+json 通用三级联动下拉列表

    Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进

  • 使用js实现一个可编辑的select下拉列表

    复制代码 代码如下: <select id="name" name="name" onkeydown="clearSelect(this,event);" onkeypress="writeSelect(this,event);" style="width:70px;"> <option value=""></option> <option va

  • 基于jquery的可多选的下拉列表框

    同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG,反正多选下拉列表框实现也很简单,与其看那些结构混乱的代码,不如自己重新实现一个. 先看效果: http://demo.jb51.net/js/2012/jquery_demo/jquery_select.html JS: 复制代码 代码如下: (function ($) { $.fn.extend({ MultDropList: function (options) { var op = $.extend({ wraperClass: "

  • js操纵dom生成下拉列表框的方法

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • Android实现三级联动下拉框 下拉列表spinner的实例代码

    Android实现三级联动下拉框 下拉列表spinner的实例代码

    主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下拉框的选中值改变时,随之修改下级的适配器的绑定值              XML布局: 复制代码 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_w

  • Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的介绍,不少童鞋都问了这么个问题,怎么获取选中的值?真是个好问题,因为我在看demo的时候也发现了这个问题,呵呵! 先简单说说这个插件: jquery-multiselect 基于Jquery-ui的组件体系. 所以使用它的时候,先得导入jquery-ui相关的js和css哦 特性 •支持点击labe

  • jquery自定义下拉列表示例

    jquery自定义下拉列表示例

    自从上次做了JQ自定义分页插件和表格插件后,就没在自定义过插件了,这一个月都在用linq和ef,基本前端都没怎么去碰了,今天有个同事说有个项目需要在下拉框里面带有复选框,本来想网上找下插件的,一想,其实这功能也并不难,于是就自己做了一个,也趁机再次熟悉下JQ自定义插件吧,好了,先附上效果图先: 看上去没怎么难吧,其实就是强化JQ,免得太久没用,生疏了.好了.附上我的代码: 复制代码 代码如下: (function($){ var option={     isEdit:false,  //是否可

  • jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

    jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

    实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果! 为便于讲解,这里直接给出省份:河南省(sf_id=1)  浙江省(sf_id=2),而地市和学生信息则分别建立两张数据表!编码方式均为:utf8!新建数据库并执行以下SQL语句! 复制代码 代码如下: /* 地市表 */ create TABLE IF NOT EXISTS `dishi`( `ds_id` int(3)

  • 模拟一个类似百度google的模糊搜索下拉列表

    复制代码 代码如下: // JavaScript Document function onChangehoverLi(thisLi){ $("#searchtext").val($(thisLi).html()); $("#suggest_ul").hide(0); validateform2(); } $(function(){ //载入时隐藏下拉li $("#suggest_ul").hide(0); }); //Ajax 动态获取关键字 /

  • php 获取select下拉列表框的值

    给select 表单无素一个名字. 表单提交后 用 $_POST 或 $_GET 方式提交 $_POST['sel']或者$_GET['sel']获得选中的select的value值 复制代码 代码如下: if( $_POST ) { echo $_POST['select']; } ?> <form name="form1" enctype="multipart/form-data" method="post" action=&qu

  • ExtJS中设置下拉列表框不可编辑的方法

    ExtJS中设置下拉列表框不可编辑的方法

    ExtJS这个框架,并没有学习和用过,只知道是一个流行的前段框架,和Easy UI,BUI,DWZ等这些框架都是差不多的,只不过比他们更加强大而已,之所以写这个,我觉得还是很有帮助的. 今天朋友遇到了一个问题:ExtJS中的下拉列表如何设置不可编辑的,html中是不可以编辑的,但是现在这种UI框架中的下拉列表框都是可以编辑的,朋友的需求就是像html中的那样效果,所以朋友想到了用editable属性,但是写了这个属性之后就报错了,当时并没有看错误,我给他找了1个属性设置为不可编辑的,但是还是不好

  • jQuery实现自定义下拉列表

    html代码: 复制代码 代码如下: <div class="dropdownContainer">     <div class="dropdownDefault">1</div>     <span class="downArrow arrow"></span>     <ul class="dropdrown-menu">         <l

随机推荐