使用jbox做列表选择

最新推荐文章于 2021-09-10 15:29:06 发布

桔子汽水蓝莓味

最新推荐文章于 2021-09-10 15:29:06 发布

阅读量2.1k

点赞数

文章标签：列表选择 jQuery jbox

本文链接：https://blog.youkuaiyun.com/qq_14984307/article/details/51199391

版权

本文介绍了如何利用jBox插件在jQuery环境下创建一个列表选择功能。在用户填写表单时，通过点击按钮弹出jBox对话框，内含一个可供选择的列表。当选定值后，使用DOM操作获取选中的radio值，从而实现表单字段的填充。

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

需求：用户填写表单的时候有个字段需要从列表中选择

效果图：

我的做法是将一个jsp放到jbox里面，然后在点击放大镜按钮的时候触发一下，用dom相关知识返回所取到的值。

具体方法如下：

首先，需要做一个列表

<table id="contentTable" class="table table-striped table-bordered table-condensed">
	<thead>
		<tr>
			<th style="text-align:center;">选择</th>
			<th style="text-align:center;">手机号</th>
			<th style="text-align:center;">缴费金额</th>
		</tr>
	</thead>
	<tbody>
	<tr>
		<td style="text-align:center;"><input name="svalue" type="radio" value="0,律林帮公用模板"/></td>
		<td style="text-align:center;"><a href="${ctx}/portal/porUser/form?id=${porUser.id}">
			律林帮公用模板</a>
		</td>
		<td style="text-align:center;">--</td>
		</tr>
	<c:forEach items="${page.list}" var="porUser">
		<tr>
			<td style="text-align:center;"><input id="svalue" name="svalue" type="radio" value="${porUser.id},${porUser.mobile}"/></td>
			<td style="text-align:center;"><a href="${ctx}/portal/porUser/form?id=${porUser.id}">
				${porUser.mobile}</a>
			</td>
			<td style="text-align:center;">
				${porUser.money}
			</td>
			
		</tr>
	</c:forEach>
	</tbody>
</table>

第一列放置类似“所有”，然后自己赋值就可以了，然后在每一行第一个td标签里面放一个“radio”，这个地方有一点需要注意，每个radio的name是一样的，所以每次选择的时候都只会勾选上一个，这就是为什么需要在最上方需要加上一条“所有”的原因。

接下来写触发的控件

<div class="control-group">
	<label class="control-label">所属客户：</label>
	<div class="controls">
	<input id="porUName" readonly="readonly" type="text" value=""  class="input-xlarge required" >
        <a id="userButton" href="javascript:" class="btn" style=""> <i class="icon-search"></i> </a>
	</div><span class="help-inline"><font color="red">*</font> </span>
</div>

然后将列表放入到jbox里面

<script type="text/javascript">
	$(document).ready(function() {
		$("#userButton").click(function(){
			$.jBox("iframe:${ctx}/portal/porUser/pulist", {
			    title: "会员选择",
			    width: 700,
			    height: 430,
			    submit: submit
			});
		});
	});
</script>

当userButton被点击的时候会触发$("#userButton").click()然后就会调用jbox，然后根据地址去寻找刚刚做的那个列表jsp。接下来就剩下取值的问题了。我先把其中的一个值取出来，通过尝试后发现可以用document.getElementById("jbox的id").contentWindow.document.getELementById('控件id').value来获取

		var submit = function (v, h, f) {
			var v=document.getElementById('jbox-iframe').contentWindow.document.getElementById('svalue').value;
			document.getElementById("porUid").value=v.split(",")[0];
			document.getElementById("porUName").value=v.split(",")[1];
		    return true;
		};

接下来就是做循环判断取出被选中的那个值了。

由于列表中勾选的是radio，所以需要将getElementsById改成getElementsByName，然后循环去取出来。

var submit = function (v, h, f) {
	var temp = document.getElementById('jbox-iframe').contentWindow.document.getElementsByName('svalue');
	for(var i=0;i<temp.length;i++)
	{
		if(temp[i].checked){
		var intHot = temp[i].value;
		intHot = intHot.split(",")[1];
		}
	}
	//var v=document.getElementById('jbox-iframe').contentWindow.document.getElementById('svalue').value;
	//document.getElementById("porUid").value=v.split(",")[0];
	//document.getElementById("porUName").value=v.split(",")[1];
	document.getElementById("porUName").value=intHot;
    return true;
};

效果图：