自动提示加下拉选择 list集合转json

最新推荐文章于 2023-09-13 17:43:02 发布

生命不息战斗不止

最新推荐文章于 2023-09-13 17:43:02 发布

阅读量900

点赞数 1

分类专栏： javaWeb生活文章标签：自动搜索下拉选择集合转json

本文链接：https://blog.csdn.net/jspamd/article/details/50675181

版权

javaWeb生活专栏收录该内容

84 篇文章 0 订阅

订阅专栏

<%@ page language="java"  pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索框自动提示功能</title>

<link rel="stylesheet" type="text/css" href="${ctx}/css/jquery.bigautocomplete.css" />
<script type="text/javascript" src="${ctx}/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.bigautocomplete.js"></script>
<script type="text/javascript">
	function changNum(Num) {  
		var username = $("#list_select option:selected").text();
		$("#myusername").val($.trim(username));
		$("#show_select").val($.trim(username));
	}
	// 下拉选择得到值
	$(document).ready(function(){		
		var dataArry = [];
	    $("#list_select option").each(function(){ //遍历全部option
	        var title = $.trim($(this).text()); //获取option的内容
	        var titleValue = $.trim($(this).val()); //获取option的值
	        var person = {};
			person.title = title;
			person.titleValue = titleValue;
			dataArry.push(person);
	    });
		$("#show_select").bigAutocomplete(
			{width:170,
			 data:dataArry,
			 callback:function(data){
			 	$("#show_select").val($.trim(data.title));
			 	$("#myusername").val($.trim(data.title));
			 	$("#list_select option:selected").text($.trim(data.title));
			 	$("#list_select option:selected").val($.trim(data.titleValue));
			}}
		);	
		
		$("#submit").click(function(){		
			var url= "XXX";
		    var cc= $("#show_select").val();	
		    var flag = true;
		    $("#list_select option").each(function(){ //遍历全部option
		        var title = $.trim($(this).text()); //获取option的内容
		        if(title == cc){
		        	flag = false;
		        }
		    });	
			if(flag){	
				alert("转入格式不正确");
		   	 	return;							
			}else{	
				$("#fform").attr("action",url);
				$("#fform").submit();
			}
		});
	});
</script>
</head>
<body> 
	<form id="fform" action="" method="post">
		<table class="retrieve_table" width="100%" cellpadding="0" cellspacing="0">				
			<tr>					
				<td height="28">
					<label>哈哈哈 ：</label>
					<input type="hidden" id="myusername" value="" name="myusername" />
					<span style="position:absolute;border:1pt solid #c1c1c1; overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);">
						<select id="list_select" name="list_select" style="width:190px;height:20px;margin:-2px;" οnchange="changNum()">
							<c:forEach var="user" items="${list}">
								<option value="${user.id}">
									${user.userName}
								</option>
							</c:forEach>
						</select>
					</span>
					<span style="position:absolute; border:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">
						<input type="text" id="show_select"  style="width:170px;height:19px;border:0pt;"	/>		
					</span>
				</td>
			</tr>				
			</table>
			 <input class="form_now marginr10" type="button" id="submit" value="提交">
		</form>				
</body>
</html>

包和文件可以自己下载。。。

生命不息战斗不止

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自动提示加下拉选择 list集合转json

搜索框自动提示功能 function changNum(Num) { var username = $("#list_select option:selected").text(); $("#myusername").val($.trim(username)); $("#show_select").val($.trim(username)); } // 下拉选择得到
复制链接

扫一扫