使用weui进行选择文本数据，并展示到某个文本框内

该博客详细展示了网页中点击事件的处理，包括jsp页面设置点击事件和js响应。当用户点击‘常用语’按钮，SEARCH.messageSearch方法被触发，弹出一个iframe加载数据。在iframe中，数据通过post请求获取并格式化显示，用户可以选择数据项。选择的数据会被存储在数组中，当点击确定按钮时，选中的数据会传回父页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//首先是点击事件的代码展示

//这部分是jsp页面设置点击事件
<a class="msgBtn">常用语</a>	

//这一部分是js点击事件
$(".msgBtn").click(function(){
		//方法{}是我们传入的参数，function内是返回值
		//传入参数的，假设传入id
		//SEARCH.deptSearch({Ids:"1"},function(obj)
		SEARCH.messageSearch({},function(obj){
		$(".msgBtn").parent().find("textarea").val(obj.msgs);
				});
			})

点击后执行SEARCH.messageSearch方法

SEARCH.messageSearch  = function(obj,complete) {
	//如果我们传入的有参数，则可以使用下方代码进行使用参数，假设传入的id
	//var url = "#?ids={IDS}";
	//url = url.replace("{IDS}",obj.uids ? obj.uids:"");
	SEARCH.COMPLETE  = complete;
	var url = "#";
	SEARCH.BODY_SCROLL_TOP = document.body.scrollTop;// body对应body标签   scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
	$("body").slideDown(20000,function(){//.slideDown隐藏元素 20000为隐藏速度
		var height = $(window).height();//代表了当前可见区域的大小
		//当浏览器窗口大小改变时(如最大化或拉大窗口后) ，
		//$(window).height() 随之改变，但是 $(document).height()是不变的。
		var $iframe = $("<iframe frameborder='no' class='search-iframe'/>");
		$iframe.height(height);//设置高度
		$iframe.attr("src",url);//修改属性值
		$("body").append($iframe);//插入内容
		
		history.pushState({id:"iframe"},"常用语");
		window.onpopstate = function() {
			window.onpopstate = null;
			document.body.scrollTop = SEARCH.BODY_SCROLL_TOP;
			$('.search-iframe').remove();//抹去存在
		}
	})
}

//接下来是jsp选取数据页面

//html部分
<body>
	<!-- 导航 -->
	<div class="weui_cells_title" id="title">标题</div>
    <div id="box" class="weui_cells weui_cells_checkbox">
    	<div class="weui_cell weui_check_label" temple='item' style="visibility:hidden">
            <div class="weui_cell_hd">
                <input type="checkbox" class="weui_check" name="checkbox1">
                <i class="weui_icon_checked"></i>
            </div>
            <div class="weui_cell_bd mycl">
	            <p></p>
            </div>
        </div>
    </div>
    <div class="bottom">
    	<div class="btnAgree">确定</div>
    </div>
</body>

//js部分
$("#title").html("常用语");//设置标题

//初始化部分
	var _$itemTemple = $("#box").find("[temple='item']").remove().css("visibility","visible");
	var arrPeo = [];
	var single = 1;
	$.post("url",{参数,需要转换为json数据进行传递},function(result){
		$("#box").html("")
		var data=result.rows;
		for(var i = 0;i < data.length;i++){
			 //调用formatePeople方法
			var $item = formatePeople(_$itemTemple.clone(),data[i])
			$("#box").append($item);
		}
	},"json")
	
	//这个方法是将获取到的数据展示到页面上并使用户选择
    function formatePeople($temple,data) {
        $temple.find("p").html(data.message);
        $temple.find(".weui_check").attr("data-id",data.id);
        $temple.find(".weui_check").attr("data-name",data.message);
        $temple.find(".weui_check").attr("data-lv",data.lv);
        $temple.find(".weui_check").attr("data-info","people");
        $temple.find(".weui_check").click(peopleDepCheck);//将选择的数据设置点击事件
       for(var i = 0;i<arrPeo.length;i++){
         	if(arrPeo[i].id == data.id){
         		$temple.find(".weui_check").attr("checked","checked");
         	}
        }
        return $temple;
    }
	
//peopleDepCheck方法是将我们选择到数据存入到数组中，当我们点击确定的时候使用
	function peopleDepCheck(e){
		var name = $(this).attr("data-name");
		var id = $(this).attr("data-id");
		var lv = $(this).attr("data-lv");
		var obj = {};
		obj.id = id;
		obj.name = name;
		obj.lv = lv;
		
		var exit =  flagPeopleCheckBox(obj);
		if($(this).prop("checked")){//添加数组
			if(single == "1") {
				if(arrPeo[0]) {
					$("[data-info='people'][data-id='" +  arrPeo[0].id +"']").prop("checked",false);
					arrPeo.pop();
				}
			}
			if(exit.flag){
				arrPeo.push(obj);
			}
		}else{//删除数组
			if(!exit.flag){
				removeArr(obj,exit.ab);//这个是我们什么都不选择的时候删除数组
			}
		}
	}

	function flagPeopleCheckBox(obj){
		var data = {};
		var ab = 0;
		var flag = true;
		data.flag = flag;
		data.ab = ab;
		for(var i = 0;i < arrPeo.length;i++){
			if(arrPeo[i].id == obj.id){
				flag = false;
				data.flag = false;
				data.ab = i;
			}
		}
		return data;
	}

//确定按钮的点击事件

	//确定
	$(".btnAgree").click(function(){
		var obj = getSelectObj();
		if(obj.msgs) {
			parent.SEARCH.close(obj);
		} else {
			parent.SEARCH.close();
		}
	});	
	
	function getSelectObj() {
		var obj = {};
		var ids = [];
		var msgs = [];
		for(var i = 0;i < arrPeo.length;i ++ ){
			ids.push(arrPeo[i].id);
			msgs.push(arrPeo[i].name);
		}
		obj.msgs = msgs.join(',');
		obj.ids = ids.join(',');
		return obj;
	}