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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/shaogaiyue9745602/article/details/51201075

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

【eg.国家参数选择】

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

       

代码:

原页面:
<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" />

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

       <input type="hidden" name="jyjyJackDecBdBody.originCountryCode" value="" id="countryCode" />
    </td>
    </tr>
</table>
  </body>

弹出框页面中的JavaScript:

<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function(){
            $('.dataTable_listtitle2').click(function(){
                //原产国
              //  if(){
                    window.parent.$('#countryCode').val($(this).find('td:eq(0)').html());
                    window.parent.$('#countryName').val($(this).find('td:eq(1)').html());
              //  }
                window.parent.$('#openDialogDIV').dialog('close');
            });
        });

</script>

展开阅读全文

没有更多推荐了,返回首页