<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="<#ZC_BLOG_LANGUAGE#>" />
<title>下拉框与输入框动态切换</title>
<script type="text/javascript" src="js/jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#changeItem").bind("click", function() {
var flag = $("#inputer").is(":visible"); //判断元素显示或隐藏状态
$("#inputer").toggle(1,function(){
$("#selecter").toggle(flag);
if ( $("#changeItem").attr("value") == "下拉"){
$("#changeItem").val("输入") ;
}
else{
$("#changeItem").val("下拉") ;
}
});
});
});
</script>
</head>
<body>
<form action="">
<table>
<tr>
<td>
</td>
</tr>
<tr>
<td align="left" width="190">
<input type="text" name="inputer" id="inputer"
style="width: 190px; height: 20px; margin: -2px;"/ >
<select name="selecter" id="selecter"
style="width: 190px; height: 20px; margin: -2px; display: none;">
<option value="">
请选择.....
</option>
<option value="1">
一级领导
</option>
<option value="2">
主管领导
</option>
<option value="3">
一般科员
</option>
<option value="4">
一般文员
</option>
</select>
</td>
<td align="left" width="190">
<input type="button" style="" id="changeItem" value="下拉" />
</td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
jquery实现输入框点击出现下拉列表树插件代码，jquery实现输入框点击出现下拉列表树插件代码（html）
jquery实现动态添加文本框和下拉框效果。
jQuery支持模糊查询下拉框菜单选择代码
一个带下拉模糊搜索的select，替换下拉内容后即可直接使用，只需要把对应文件放到指定文件夹中引用即可
js实现input输入框输入信息后出现下拉选择框，下拉框的数据源可以使根据输入的值从数据库中动态获取
类似百度下拉提示 模拟select下拉框 jquery插件 自动提示框 下拉框 本插件依赖于jquery的插件，类似于百度下拉提示框
jquery输入框提示插件input输入框文字下拉提示添加标签代码
jQuery实现点击下拉框输入框时，自动显示下面的下拉列表，而且是根据输入框中输入的搜索添加，自动在后台查找，然后传到前台，展现页面
JQ JS javascript bootstrap 带搜索 下拉框 select
主要介绍了jQuery实现点击下拉框中的值累加到文本框中的方法,涉及jQuery事件绑定及页面元素属性动态获取与操作相关实现技巧,需要的朋友可以参考下
支持自动匹配的下拉框JS程序，直接在html中设置好dom名字，即可在本程序中使用。
闲来无事,用jquery模拟了一个下拉框,可以通过输入框对下拉列表进行过滤. 原理: 1.下拉框由div和文本框组成, 2.点击下拉框弹出下拉列表 3.向文本框输入值时对下拉框进行过滤 4.选择值后将值回显到输入框 依赖: jquery...
主要介绍了js与jquery实时监听输入框值的oninput与onpropertychange方法,实例分析了oninput与onpropertychange实现下拉框里自动匹配关键字实时监听文本框value值变化的功能,需要的朋友可以参考下
JQuery插件，下拉选择输入框，实现效果为下拉选择输入框，在输入框中可以输入，辅助实现搜索功能，在下拉框中可以选择内容填充，并有两种填充方式，一种普通input赋值方式，一种是标签形式的内容填充，如csdn的添加...
jQuery插件—mcdropdow仿多层次的下拉框插件。把鼠标移到下拉框上，然后点击下拉框的按钮，你就会发现神奇之处，注意，有点小遗憾，下拉输入框并不能选择，只能点击右侧的箭头选择内容，不过这问题可以解决，你把...
jQuery输入框下拉选择菜单是一款jQuery模拟select下拉框分页菜单插件，点击输入框弹出下拉分页菜单选择列表，支持下拉，分页，键盘操作等功能代码。
jQuery弹出下拉框日期选择器基于jquery.1.10.2.min.js制作，点击输入框弹出日期时间选择下拉框，可在下拉列表选择日期时间，多种表单样式。
这是一款基于jquery实现的下拉列表树插件源码，是一款实用的jquery 树形下拉框下拉树代码。点击文本框即可弹出树形下拉列表，单击列表项即可选中列表对应文字，是一款非常实用的特效源码。