脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 单选框传值至父页面

网页从弹窗页面单选框传值至父页面代码分享

 更新时间：2015年09月29日 09:34:26   作者：jjnice  
最近有项目需求，需要在加入新机构的时候，需要选择它的上级机构，下面把代码整理，分享给大家，需要的朋友可以参考下

在项目中，需要完成这样一个功能：在加入新机构的时候，需要选择它的上级机构，实现方式为点击查找填入按钮，弹出弹窗页面，用户点击所需的行，并点击确定按钮，将用户选择的机构名称和机构代码传回到加入新机构的页面。

在这里记录一下弹窗页面代码

<!DOCTYPE html PUBLIC "-//WC//DTD HTML . Transitional//EN" "http://www.w.org/TR/html/loose.dtd">
 <%@ page contentType="text/html;charset=utf-" pageEncoding="utf-" language="java" %>
 <%@ taglib uri="/struts-tags" prefix="s"%>
 <%@ taglib uri="/page-tags" prefix="p"%>
 <html>
   <head>
     <title>机构点选查询</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-">
     <link rel="stylesheet" type="text/css" href="../css/style.css" />
     <link rel="stylesheet" type="text/css" href="../css/newStyle.css" />
     <script type="text/javascript" src="../js/jquery.js"></script>
     <script type="text/javascript" src="../js/common.js"></script>
     <script type="text/javascript" charset="utf-">
 //点击整行都可选中单选框
     function clickTr(obj) {
     $("#mainTable tbody tr td input[type='radio']").attr("checked",
         "undefined");
     $("td input[type='radio']", obj).attr("checked", "checked");
     //alert($("td input[name='insideEquip.equipinstance']",obj).val());
   }
 //将通过td的class获取到的值传到父页面对应的元素上
   function setValue() {
     var input = $("#mainTable tbody tr td input[type='radio']:checked");
     if (!input.val()) {
 
       window.close();
       return;
     }
     var tr = input.parent().parent();
     
     window.opener.document.getElementById("textagencyid").value = $(
         "td.agancy input", tr).val();
     window.opener.document.getElementById("textagencyname").value = $(
         "td.agencyname", tr).text();
     
     window.close();
   }  
   </script>
   </head>
   <body>
 <div class="searchArea" style="height:px;">
 <form action="" method="post">
     <input class="button" type="button" value="确定" onclick="javascript:setValue();"/>
     </form>
   </div>
    <div class="tableArea">
   <table class="mainTable" id="mainTable">
     <thead>
     <tr>
               <th>选择</th>
               <th>机构编号</th>
               <th>机构名称</th>
               <!--<th>工作岗位码</th>-->
               <th>上级机构</th>
               <th>组织机构代码</th>
               <th>机构类别</th>        
     </tr>
     </thead>
     <tbody>  
    <s:iterator value="busiAgencys" var="p" >
     <tr onclick="clickTr(this);">
     <td class="agancy"><input type="radio" name="log" value="<s:property value="agencyid"/>" ></td>
     <td><s:property value="agencyid"/></td>
     <td class="agencyname"><s:property value="agencyname"/></td>
     <!--<td><s:property value="handle"/></td>-->
     <td><s:property value="sjjg"/></td>
     <td><s:property value="orgcode"/></td>
     <td><s:property value="jglb"/></td>
    </tr>
    </s:iterator>    
     </tbody>
   </table>
   <div class="pagin">
     <p:page href="findBusiAgency" css="pages" totalPage="${totalPage}" page="${page}"></p:page>
   </div>  
   </div>
   <script type="text/javascript">
   $('.tablelist tbody tr:odd').addClass('odd');
   </script>
   </body>
 </html>

以上代码很简单吧，需要的朋友可以直接拷贝使用，以上内容希望对大家有所帮助。

您可能感兴趣的文章:

相关文章

  • JS生态系统加速Tailwind CSS工作原理探究

    JS生态系统加速Tailwind CSS工作原理探究

    这篇文章主要为大家介绍了JS 生态系统加速Tailwind CSS使用及工作原理探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • uni-app h5端在jenkins构建报错解决

    uni-app h5端在jenkins构建报错解决

    这篇文章主要为大家介绍了uni-app h5端在jenkins构建报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • javascript IE中的DOM ready应用技巧

    javascript IE中的DOM ready应用技巧

    当我们想在页面加载之后执行某个函数，肯定会想到onload了 但onload在浏览器看来，就是页面上的东西全部都加载完毕后才能发生，但那就为时已晚了。
    2008-07-07
  • javascript获取URL参数与参数值的示例代码

    javascript获取URL参数与参数值的示例代码

    本篇文章主要是对javascript获取URL参数与参数值的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • 详解webpack的proxyTable无效的解决方案

    详解webpack的proxyTable无效的解决方案

    这篇文章主要介绍了详解webpack的proxyTable无效的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 微信小程序 this.triggerEvent()的具体使用

    微信小程序 this.triggerEvent()的具体使用

    这篇文章主要介绍了微信小程序 this.triggerEvent()的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • javascript中数组与对象的使用方法区别

    javascript中数组与对象的使用方法区别

    数组（array）是按次序排列的一组值。JS其实没有真正的数组，只是用对象模拟数组。本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。在javascript中，数组又可以认为是索引数组，即可以用整数来进行索引。数组和对象在这种情况下非常接近。
    2022-12-12
  • 根据表格中的某一列进行排序的javascript代码

    根据表格中的某一列进行排序的javascript代码

    根据表格中的某一列进行排序的实现方法有很多，下面为大家介绍下如何使用js来简单实现下，需要的朋友不要错过
    2013-11-11
  • 十个利用JavaScript实现的爱心动画特效

    十个利用JavaScript实现的爱心动画特效

    情人节将至，程序员证明自己不是直男的时候到啦！小编为大家准备了十个通过JavaScript实现的爱心动画特效，快学起来，到时候给女朋友一个惊喜吧
    2022-02-02
  • 探析浏览器执行JavaScript脚本加载与代码执行顺序

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式，分析HTML中JavaScript脚本的执行顺序问题，通过本文给大家分享浏览器执行JavaScript脚本加载与代码执行顺序，对浏览器执行javascript及执行顺序相关知识感兴趣的朋友一起学习吧
    2016-01-01

最新评论