可输入下拉框

最新推荐文章于 2024-03-05 16:42:46 发布

懷惗尛時候

最新推荐文章于 2024-03-05 16:42:46 发布

阅读量380

点赞数

分类专栏： javascript 文章标签： javascript JavaScript

本文链接：https://blog.csdn.net/yyyyu3/article/details/8162756

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<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.7.min.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>

懷惗尛時候

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可输入下拉框

" /> 下拉框与输入框动态切换 $(document).ready(function() { $("#changeItem").bind("click", function() { var flag = $("#inputer").is(":visible"); //判断元素显示或隐藏状态 $("#inputer").toggle(1,fun
复制链接

扫一扫