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

最新推荐文章于 2024-05-15 16:21:10 发布

郝南过

最新推荐文章于 2024-05-15 16:21:10 发布

阅读量1.2k

点赞数

文章标签： jquery select javascript

本文链接：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" />

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

弹出框页面中的JavaScript：

</script>

郝南过

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
dialog表单填写的常用效果功能实现

在开发中经常遇到表单填写时，需要select选择数据，但是当数据较庞大时可以采用下面的效果【eg.国家参数选择】效果图：【鼠标单击输入框或者图片，后台查询弹出国家参数列表，选择后单击选择，数据自动填写在文本框内】代码：原页面： function openDialogDIV(url,title,widt
复制链接

扫一扫