`
Franciswmf
  • 浏览: 800749 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

下拉列表select中使用ajax的json数据交换格式动态改变div层里面的复选框checkbox值

 
阅读更多
align=left][size=large]
function  doChange(f)
{
   if(f.value ==0)
   {
     document.getElementById("div").style.display="none";
      document.getElementById("good").style.display="block";
       document.getElementById("goods").style.display="none";
       document.getElementById("goods").value="";
   }else if(f.value ==1){
     document.getElementById("div").style.display="block";
      document.getElementById("good").style.display="none";
      document.getElementById("good").value="";
     document.getElementById("goods").style.display="block";
   }
   else{
    document.getElementById("div").style.display ="block";
        document.getElementById("good").style.display="none";
        document.getElementById("good").value="";
            document.getElementById("goods").style.display="none";
            document.getElementById("goods").value="";
   } 
   
}
---------------------------------------------------------
function getMissiveType(){
var typeScope=$('#typeScope').val();
$.ajax({
type:"POST",
dataType:"json",
url:"<%=path%>/pages/CommonSession/index.do",
data:"doaction=searchByMissiveTypeScope&typeScope="+typeScope,
success:function(data){
var len=data.length;
if(document.getElementById("good").style.display=="block"&&document.getElementById("goods").style.display 

=="none"){
$('#good').contents().remove();
for(i=0;i<len;i++){
$('#good').append("<input type='checkbox' name='missiveType' id='" + data[i].MISSIVE_TYPE_ID + " ' value='" + data

[i].MISSIVE_TYPE_ID + "'/>" + data[i].NAME + "<br />");
}
}
if(document.getElementById("good").style.display=="none"&&document.getElementById("goods").style.display 

=="block"){
$('#goods').contents().remove();
for(i=0;i<len;i++){
$('#goods').append("<input type='checkbox' name='missiveTypes' id='" + data[i].MISSIVE_TYPE_ID + " ' value='" + data

[i].MISSIVE_TYPE_ID + "'/>" + data[i].NAME + "<br />");
}
}
}
});
}
-------------------------------------------------------------
  <tr> 
            <td width="15%" height="30" bgcolor="E1EEFD" class="tablex">
            <div align="right">所属类型&nbsp;</div></td>
            <td width="55%" height="30" bgcolor="E1EEFD" class="tableleft">&nbsp; 
               <select name="typeScope" id="typeScope" style="width:51%" onchange="doChange(this);getMissiveType()"> 
                <option value="" selected="selected">--请选择--</option>
               		<option value="0" >公司</option>
               		<option value="1" >部门</option>
             </select>
            </td>
          </tr>
--------------------------------
            <tr id="div"> 
            <td height="30" bgcolor="ECF4FD" class="tablex">
                <div align="right">部门&nbsp;</div></td>
            <td height="30" bgcolor="ECF4FD" class="tableleft">&nbsp; 
             <input type="text" name="orgname" id="orgname" style="width:40%" class="table" value="" 

readonly="readonly"/>
             <input type="hidden" name="orgid" id="orgid"  value=""/>
		     <input type="button" class="botton02" value="选择" onclick="selectorgAll();"/>
            </td>
          </tr>
---------------------------------
 <tr> 
            <td  width="15%" height="30" bgcolor="ECF4FD" class="tablex">
                <div align="right">公文类别&nbsp;</div>
            </td>
            <td  width="55%" height="30" bgcolor="ECF4FD" class="tableleft">&nbsp; 
              <div id="good" style="display:none">
              </div>
              <div id="goods" style="display:none">
              </div>
            </td>
</tr>






简化版简化版简化版简化版简化版简化版简化版简化版简化版简化版简化版简化版

---------------------------------------------------------------
<%@ page language="java"
	import="java.util.*,com.hxkj.commonbusiness.MissiveCombiz.MissiveTypeCombiz,com.hxkj.entity.*"%>
<%@ page contentType="text/html;charset=utf-8"%>
<%@ page import="java.util.*"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ include file="../common/taglibs.jsp"%>
<html:html>
<%
	String id = "-1";
		if (request.getAttribute("id") != null) {
			id = (String) request.getAttribute("id");
		}
		String path = request.getContextPath();
		//获取公文类别
		MissiveTypeCombiz misCom = new MissiveTypeCombiz();
		List<MissiveTypeBean> MissiveTypeBeans = misCom
				.getMissiveTypeByScope("-1");//全部，包含司发文和部门文
		pageContext.setAttribute("MissiveTypeBeans", MissiveTypeBeans);
		Date temp = new Date();
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy");
		String tempStr = sdf.format(temp);
%>
<head>
	<link rel="stylesheet" href="<%=path%>/css/gcoa/css.css">
	<script language="Javascript" src="../../js/ortfunc.js">
</script>
	<script language="Javascript" src="../../js/ortfunct.js">
</script>
	<script language="Javascript" src="../../js/public.js">
</script>
	<!-- 选择部门时需要引入这两个js,从书中获取部门名称以及ID -->
	<script type="text/javascript" src="<%=path%>/js/jquery.js">
</script>
	<script type="text/javascript" src="<%=path%>/js/user.js">
</script>
	<style type="text/css">
.xian {
	border-bottom: 1px none;
	border-left: 1px none;
	border-top: 1px none;
	border-right: 1px none;
	text-align: left;
	font-size: 14px;
	background-color: ECF4FD;
}
</style>
	<SCRIPT language="javascript">
function saveMissiveNo(){
var isTrue = true;
var missiveType=document.getElementById("missiveType").value;
var orgid=document.getElementById("orgid").value;
var year=document.getElementById("year").value;
var typeScope=document.getElementById("typeScope").value;//公司：不提示选择部门
if (typeScope == "") {
    alert( "请选择所属类型！" );
    document.forms[0].typeScope.focus();
   isTrue=false;  
  }else if(document.forms[0].orgname.value==""&&typeScope!="0"){
      alert('请选择部门');
    document.forms[0].orgname.focus();
   isTrue=false;  
  }else if(document.forms[0].missiveType.value == "") {
		alert('请选择公文类别');
		document.forms[0].missiveType.focus();
		isTrue=false;  
  }else if(document.getElementById("dealType").value == ""&&document.getElementById("new").checked) {
		alert('请选择处理类型');
		document.forms[0].dealType.focus();
		isTrue=false;  
  }
if(isTrue){
 saveMissiveNoAjax(missiveType,orgid,year);
 document.forms[0].submit();
 //新增成功之后重新返回addMissiveNo.jsp页面
}
}
function saveMissiveNoAjax(x,y,z)
 {
 var xmlHttp;
 try
    {
   // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {

  // Internet Explorer
   try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {

      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的浏览器不支持AJAX！");
         return false;
         }
      }
    }
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
         document.myForm.time.value=xmlHttp.responseText;
        }
      }
    xmlHttp.open("GET","<%=path%>/pages/MissiveNoManager/index.do?doaction=saveMissiveNo&missiveType="+x+"&orgid="+y+"&year="+z,true);//xz修改，针对ie8正文被锁bug
    xmlHttp.send(null);
 }
 function  doChange(f)
{
   if(f.value ==0)
   {
       document.getElementById("div").style.display="none";
       document.getElementById("good").style.display="block";
       document.getElementById("choice").style.display="block";
   }else if(f.value ==1){
      document.getElementById("div").style.display="block";
      document.getElementById("good").style.display="block";
      document.getElementById("good").value="";
      document.getElementById("choice").style.display="block";
   }
   else{
      document.getElementById("div").style.display ="block";
      document.getElementById("good").style.display="none";
      document.getElementById("good").value="";
           
   } 
}
function getMissiveType(){
var typeScope=$('#typeScope').val();
if(typeScope==""){
 document.getElementById("choice").style.display="none";
}
$.ajax({
type:"POST",
dataType:"json",
url:"<%=path%>/pages/CommonSession/index.do",
data:"doaction=searchByMissiveTypeScope&typeScope="+typeScope,
success:function(data){
var len=data.length;
$('#good').contents().remove();
//for循环
for(i=0;i<len;i++){
$('#good').append("<input type='checkbox' name='missiveType' id='" + data[i].MISSIVE_TYPE_ID + " ' value='" + data[i].MISSIVE_TYPE_ID + "'/>" + data[i].NAME);
}
//for循环结束
}
});
}
function selfMissiveType(){
if(document.getElementById("new").checked){
     document.getElementById("div3").style.display="block";
}
if(document.getElementById("old").checked){
     document.getElementById("div3").style.display="none";
}
}
</SCRIPT>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
	<form name="form" method="post"
		action="<%=path%>/pages/missiveManage/addMissiveNo.jsp" target="_self">
		<input type="hidden" name="id" value="<%=id%>" />
		<table width="98%" border="0" align="center" cellpadding="0"
			cellspacing="0" bgcolor="E9ECF5">
			<tr>
				<td height="26" colspan="2" valign="middle" class="font13">
					<div align="center">
						&nbsp;
					</div>
				</td>
				<td width="80%" height="26" valign="bottom" class="font13">
					<div align="right">
						<a href="javaScript:saveMissiveNo();" target="_self">保存</a>
						&nbsp;|&nbsp;
						<a href="<%=path%>/pages/missiveManage/MissiveNoManager.jsp"
							target="_parent">返回</a>
					</div>
				</td>
				<td width="3%" valign="top" class="font13">
					<div align="right">
						<img src="<%=path%>/img/gcoa/tddir0101.gif" width="17" height="14">
					</div>
				</td>
			</tr>
		</table>
		<table width="98%" border="0" align="center" cellpadding="0"
			cellspacing="0" bgcolor="E9ECF5">
			<tr>
				<td valign="top">
					<div align="center">
						<table width="95%" border="0" align="center" cellpadding="0"
							cellspacing="0" class="tablelsdi">
							<tr>
								<td width="4%" background="<%=path%>/img/gcoa/tablelb01.gif">
									<img src="<%=path%>/img/gcoa/tablelb01-left.gif" width="21"
										height="22">
								</td>
								<td width="82%" background="<%=path%>/img/gcoa/tablelb01.gif"
									class="font12w">
									新增公文字号
								</td>
								<td width="14%" background="<%=path%>/img/gcoa/tablelb01.gif">
									<div align="right">
										<img src="<%=path%>/img/gcoa/tablelb01-right.gif" width="21"
											height="22">
									</div>
								</td>
							</tr>
						</table>
						<table width="95%" border="0" align="center" cellpadding="0"
							cellspacing="0" class="tablelb">
							<tr>
								<td width="15%" height="30" bgcolor="E1EEFD" class="tablex">
									<div align="right">
										所属类型&nbsp;
									</div>
								</td>
								<td width="55%" height="30" bgcolor="E1EEFD" class="tableleft">
									&nbsp;
									<select name="typeScope" id="typeScope" style="width: 51%"
										onchange="doChange(this);getMissiveType()">
										<option value="" selected="selected">
											--请选择--
										</option>
										<option value="0">
											公司
										</option>
										<option value="1">
											部门
										</option>
									</select>
								</td>
							</tr>

							<tr id="div">
								<td height="30" bgcolor="ECF4FD" class="tablex">
									<div align="right">
										部门&nbsp;
									</div>
								</td>
								<td height="30" bgcolor="ECF4FD" class="tableleft">
									&nbsp;
									<input type="text" name="orgname" id="orgname"
										style="width: 40%" class="table" value="" readonly="readonly" />
									<input type="hidden" name="orgid" id="orgid" value="" />
									<input type="button" class="botton02" value="选择"
										onclick="selectorgAll();" />
								</td>
							</tr>
							<tr>
								<td height="30" bgcolor="E1EEFD" class="tablex">
									<div align="right">
										是否新公文类型&nbsp;
									</div>
								</td>
								<td height="30" bgcolor="E1EEFD" class="tableleft">
									&nbsp;
									<input type="radio" name="like" id="new" value="1"
										onclick="selfMissiveType(this)" />
									是
									<span style="padding-left: 20px;"></span>
									<input type="radio" name="like" id="old" value="0"
										onclick="selfMissiveType(this)" checked="checked" />
									否
								</td>
							</tr>
							<tr>
								<td width="15%" height="30" bgcolor="ECF4FD" class="tablex">
									<div align="right">
										公文类别&nbsp;
									</div>
								</td>
								<td width="55%" height="30" bgcolor="ECF4FD" class="tableleft">
									&nbsp;
									<div id="good" style="display: none">
									</div>
									<div id="choice" style="display: none">
										<font style="size: 5px;">可选操作:</font><span
											style="padding-left: 15px;"></span><a href="">全选</a><span
											style="padding-left: 25px;"></span><a href="">反选</a><span
											style="padding-left: 25px;"></span><a href="">取消</a>
									</div>
								</td>
							</tr>
							<tr id="div3" style="display: none">
								<td width="15%" height="30" bgcolor="E1EEFD" class="tablex">
									<div align="right">
										处理类型&nbsp;
									</div>
								</td>
								<td width="55%" height="30" bgcolor="E1EEFD" class="tableleft">
									&nbsp;
									<select name="dealType" id="dealType" style="width: 51%">
										<option value="" selected="selected">
											--请选择--
										</option>
										<option value="1">
											固定描述类型（年份）X号
										</option>
										<option value="2">
											年份第X期（总第N期）
										</option>
										<option value="3">
											部门+固定描述类型（年份）X号
										</option>
									</select>
								</td>
							</tr>

							<tr>
								<td height="30" bgcolor="ECF4FD" class="tablex">
									<div align="right">
										年度&nbsp;
									</div>
								</td>
								<td height="30" bgcolor="ECF4FD" class="tableleft">
									&nbsp;
									<input type="text" name="year" id="year"
										value="<%=tempStr + 6%>" readonly="readonly" class="xian">
								</td>
							</tr>
						</table>
						<br>
					</div>
				</td>
			</tr>
		</table>
	</form>
</body>
</html:html>
[/size][/align][size=x-large][b]-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
分享到：
| json checkbox java
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery可选择条件筛选框

    这可能包括多个复选框、下拉框或者输入框，每个代表一个筛选条件。例如： ```html &lt;div id="filterOptions"&gt; &lt;input type="checkbox" name="category" value="electronics"&gt; 电子产品 &lt;input type="checkbox" ...

    JStree(最全)

    - **多选模式**: 通过配置 `checkbox` 插件，可以启用复选框，允许用户多选节点。 - **拖放功能**: JStree 支持节点拖放，方便用户重新组织树结构。 - **搜索**: 用户可以通过输入关键词，实时搜索并高亮显示匹配的...

    jsTree动态tree

    jsTree内置了许多插件，如checkbox（复选框）、contextmenu（右键菜单）、search（搜索功能）等，可以通过配置启用。例如，启用复选框插件： ```javascript 'plugins': ['checkbox'], ``` ### 6. 事件处理 jsTree...

    easyui Tree系统管理

    8. **复选框支持**：通过设置`checkbox`属性为`true`，可以启用节点的复选框功能，允许用户批量选择。 9. **拖放功能**：EasyUI Tree支持拖放操作，用户可以调整节点的位置，实现动态的层级关系调整。需要设置`...

    Easyui 树形控件展示

    2. 复选框：通过设置 `checkbox` 为 `true`，可以在节点上显示复选框，实现多选功能。 3. 自定义操作：利用 `onBeforeExpand`, `onExpand`, `onBeforeSelect` 等事件，可以自定义节点的展开、选中等行为。 五、实际...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    18.jQuery美化复选框Checkbox和radio单选框的插件hcheckbox示例 19.jQuery漂亮Flash卡通动感菜单示例 20.jQuery漂亮动感二级网站导航菜单源码下载 21.jquery漂亮苹果系统动画效果的导航菜单示例 22.jquery...

    jstree jquery

    1. **多选和复选功能**：JSTree 提供了复选框插件，允许用户通过勾选来选择一个或多个节点，这对于构建具有多选功能的树形列表非常有用，如文件管理器中的文件选择。 2. **可配置性**：JSTree 具有高度的可定制性，...

    jsTree JAVA例子

    jsTree 支持多种插件来扩展其功能，如 `checkbox` 插件实现复选框选择，`contextmenu` 插件添加右键菜单，`types` 插件定义不同类型的节点样式等。例如，启用 `checkbox` 插件： ```javascript $('#jstree').jstree...

    jsTree实例，jsTree实例

    5. **插件 (Plugins)**：扩展 jsTree 功能的组件，如 `checkbox`（复选框）、`contextmenu`（右键菜单）等。 ### jsTree 初始化 在网页中使用 jsTree 需要先引入库文件，然后对目标容器进行初始化。基本代码如下：...

    基于jquery的树形结构JsTree 使用心得

    - `'plugins'`: 启用的插件，如`checkbox`（复选框）、`contextmenu`（右键菜单）等。 - `'themes'`: 主题样式，可以自定义主题或使用预设主题。 ### 三、数据源 JsTree支持多种数据源，可以是JSON数组、AJAX请求...

    使用jsTree实现js树形结构

    jsTree 具有众多插件，如 `checkbox`（复选框）、`contextmenu`（右键菜单）和 `search`（搜索功能），可以通过添加插件配置来启用。同时，你可以自定义主题以适应项目需求。 4. **API 调用** jsTree 提供了一套...

    js方法整理.docx

    9. 获取复选框`checkbox`、单选按钮`radio`和下拉框`select`的值：使用`attr("value")`或`val()`。对于单选组，可以使用`$("input[type=radio][checked]").val()`获取被选中的值；对于下拉框，使用`$('#sel').val()`...

    html表单详细介绍

    4. 复选框：`&lt;input type="checkbox"&gt;`允许多选。 5. 下拉列表：`&lt;select&gt;`与`&lt;option&gt;`配合，提供可下拉选择的列表。 6. 提交按钮：`&lt;input type="submit"&gt;`用于提交表单数据。 7. 重置按钮：`&lt;input type="reset"&gt;...

    前端项目-jstree.zip

    5. **插件配置**：根据需求选择和配置插件，例如启用`checkbox`插件实现复选框功能。 6. **事件监听**：绑定jstree的事件处理函数，响应用户的操作。 ### jstree插件系统 jstree有多个内置插件，如： - **...

    JsTree 实例使用

    4. **插件支持**：JsTree 提供了许多插件来扩展功能，比如`checkbox`（复选框）、`search`（搜索）和`contextmenu`（右键菜单）。例如启用复选框： ```javascript 'plugins': ['checkbox'], ``` 5. **节点...

    python教程之jqurey入门

    - `$("input:checkbox")`：选取所有的复选框。 - `$("select option:selected")`：选取所有被选中的 `&lt;option&gt;` 元素。 - `$("input:disabled")`：选取所有被禁用的输入元素。 #### 三、DOM 操作 1. **获取内容...

    基于Jquery的JSTree实例

    在配置项中，'core'部分用于设置数据源，而'plugins'则用于开启或关闭特定功能，如复选框（checkbox）和右键菜单（contextmenu）。 JSTree提供了一系列事件，如`select_node.jstree`、`rename_node.jstree`等，可以...

    jsTree大集合(最完整)

    jsTree的扩展性强大，它提供了丰富的插件，如`checkbox`支持复选框，`contextmenu`提供右键菜单，`search`实现节点搜索，`dnd`实现拖放功能，`types`允许定义不同类型的节点，等等。通过启用和配置插件，可以进一步...

    jstree-实用的jQuery目录树插件

    - `plugins`：启用的插件列表，比如"checkbox"用于添加复选框功能，"contextmenu"用于右键菜单等。 - `themes`：设置主题，包括名称、URL、图标等。 - `types`：定义节点类型及其规则，用于限制节点的操作。 **四、...

    jstree1.0

    - **插件使用** - 根据需求选择并配置插件，如启用`checkbox`插件来实现复选框功能。 ### 示例代码 ```html &lt;!DOCTYPE html&gt; &lt;script src="jstree/dist/jstree.min.js"&gt;&lt;/script&gt; &lt;div id="jstree"&gt;&lt;/div&gt;...

Magicbox
Global site tag (gtag.js) - Google Analytics