dialog表单填写的常用效果功能实现

不念不忘少年蓝@ 2023-10-16 23:33 8阅读 0赞

**在开发中经常遇到表单填写时，需要select选择数据，但是当数据较庞大时可以采用下面的效果**

**【eg.国家参数选择】**

**效果图： 【鼠标单击输入框或者图片，后台查询弹出国家参数列表，选择后单击选择，数据自动填写在文本框内】**

![Center][]

**代码：**

原页面：  
<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>  
<script type="text/javascript">  
function openDialogDIV(url,title,width,height)\{  
if(width == null)  
width = $(window).width() \* 0.95;  
if(height == null)  
height = $(window).height() \* 0.9;  
$("body").append('<div id="openDialogDIV"></div>');  
var dialog=$("\#openDialogDIV");  
var title = title;  
dialog.html('<iframe id="grant\_iframe0" src="'+url+'" frameborder="0" style="height:100%; width:100%; marginwidth:0; marginheight:0; scrolling:no;"></iframe>');  
dialog.dialog(\{  
modal: true,  
title: title,  
width:width,  
height:height  
\});  
\}

//原产国代码  
function guo()\{  
var url= '----------------------------路径-----------------------------------------';  
openDialogDIV(url,'原产国',600,360);  
\}

</script>  
<body>  
<table >  
<tr >  
<td class="dataTable\_addLeftText">原产国：</td>  
<td>  
<input type="text" name="CountryName" id="countryName" οnclick="guo()" readonly="readonly"/>  
<img οnclick="guo()" src="<c:url value="/images/jckj/add.png"/>" width="16" height="16" border="0" />

<%--隐藏域存放的为国家编码--%>

弹出框页面中的JavaScript：

</script>

[Center]: https://img-blog.csdn.net/20160420152259248?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center