如何实现点击单选按钮，隐藏下拉框？

2014-01-03 10:23:34 458 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Flex下拉框 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="initHandler(event)" 阅读详情

如图，如何实现我点击林业局的时候下拉框隐藏掉点击林场的时候出现，求指导。
开发环境
easyui1.3.2

，最好具体些，本人菜鸟，代码不太会写，刚刚接触

...全文

8.2.点击表单控件（单选/复选/开关/下拉框），实现元素隐藏显示 1.需求 1.1.使用场景在添加编辑表单，经常会出现根据选项，动态显示和隐藏某些元素。比如添加一个网络设备，当选择通讯方式为串口时，需要填写串口号和波特率；当选择通讯方式为网卡时，需要选择IP地址和子网掩码。串口号和IP地址，不能同时出现，只能二选一。如下图所示的效果。 1.2.解决思路正常的实现思路，是将这些表单输入框都放到页面上，然后根据通讯方式，进行动态的显示和隐藏。利用框架... 阅读详情

u012223660

JavaScript 87,984 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

Cocl 2014-01-03

打赏
举报

	var lyjQx = document.getElementById("lyj"),
		lcQx = document.getElementById("lc"),
		qxSel = document.getElementById("tfckbox"),
		checkQx = function(){
			if(lyjQx.checked || !lcQx.checked){
				qxSel.style.display="none"
			}
			if(lcQx.checked){
				qxSel.style.display="block"
			}
		}
		
	window.onload = function(){checkQx()}
	lyjQx.onclick = function(){checkQx()}
	lcQx.onclick = function(){checkQx()}

张运领 2014-01-03

打赏
举报


document.getElementById("lyj").onclick = function(){
	if(this.checked){
		document.getElementById("tfckbox").style.display = "none";
	}else{
		document.getElementById("tfckbox").style.display = "block";
	}
}
document.getElementById("lc").onclick = function(){
	if(this.checked){
		document.getElementById("tfckbox").style.display = "block";
	}else{
		document.getElementById("tfckbox").style.display = "none";
	}
}

没有添加页面最初加载时，初始化的显示，你自己修改下吧。

u012223660 2014-01-03

打赏
举报

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

    <title>森林防护安检信息系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
	<script type="text/javascript" src="easyui/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="easyui/easyui-lang-zh_CN.js"></script>
	<link href="css/global.css" rel="stylesheet" type="text/css" />
	<link href="css/css.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
	// 搜索框查询事件
	function doSearch(value, name) {
	alert(value+":"+name)
		$("#ptList").datagrid("options").queryParams = {
			tfName : name,
			tfValue : value
		};
		$("#ptList").datagrid("reload");
	}
	// 远程加载渲染完毕后执行方法。
	$.parser.onComplete = function() {
		// 添加按钮事件
		$("#addUser").bind("click", function() {
			$("#UserWin").window("setTitle","添加林场分类");
			$("#UserWin").window("open");
		});
		// 取消按钮事件
		$("#noUser").bind("click", function() {
			$("#UserWin").window("close");
		});
		//修改按钮事件
		$("#updateUser").bind("click", function() {
			// 修改窗口标题
			$("#UserWin").window("setTitle","修改林场分类");
			// 获取当前选择行，如果为空则提示
			var column = $("#ptList").datagrid("getSelected");
			if(column){
			    $("#uidVDB").attr("value",column.uid);
			   	$("#tfckbox").combobox("select",column["treeFarm"].tfid);
				$("#loginNameVDB").attr("value",column.loginName);
				$("#realNameVDB").attr("value",column.realName);
				$("#telephoneVDB").attr("value",column.telephone);
				$("#hidePwd").attr("value",column.loginPwd);
				$("#remarkVDB").attr("value",column.remark);
				
				// 去掉林场名称验证
				$("#UserWin").window("open");
			}else{
				$.messager.alert('警告','请选择需要操作的数据!'); 
			} 
		});
		
		//权限管理
		
		
		
		
		
       //删除按钮事件
		$("#delUser").bind("click", function() {
			var array = $("#ptList").datagrid("getSelections");
			var idStr="";
			for(var i=0; i<array.length; i++){
				if(i!=array.length-1){
		        	idStr += array[i].uid+",";
		        }else{
		          	 idStr+= array[i].uid;
		        } 
			}
			if(idStr == ""){
			$.messager.alert("提示", "请选择要删除的记录！", "info");
				}else {
				$.messager.confirm("询问", "您是否要删除当前选中记录？", function(b) {
					if(b){
			
			// 执行删除的Ajax delete
			jQuery.ajax({  
		        type:"post",  
		        url:"./user/delete.do?idStr="+idStr,  
		        success: function aa(data) { 	
	        	// 刷新当前数据窗格
			$("#ptList").datagrid("reload");		
	        }
	    });
	    }
		});
		}
		});
		// 保存按钮事件
		$("#saveUser").bind("click", function() {
			$("#UserForm").form("submit", {
				url : "user/saveOrAdd.do",
				onSubmit : function() {
					var isValid = $(this).form('validate');
					if (!isValid) {
						$.messager.progress('close'); // 如果表单是无效的则隐藏进度条
					}			
					return isValid; // 返回false终止表单提交
				},
				success : function(data) {
					var data = eval('(' + data + ')'); // 将返回信息转换为JSON格式。  
					$.messager.alert("系统消息", data.message);
					if (data.success) {
						// 如果添加成功则关闭此窗口
						$("#UserWin").window("close");
						// 刷新当前数据窗格
						$("#ptList").datagrid("reload");
					}
				}
			});
		});
		// 监控编辑窗口事件，当窗口关闭时清空窗口内表单数据
		$("#UserWin").window({
			"onClose" : function() {
				$("#UserForm").form("clear");
			}
		});
		//验证密码
		$("#cc").extend($.fn.validatebox.defaults.rules, {    
    equals: {    
        validator: function(value,param){    
            return value == $(param[0]).val();    
        },    
        message: '两次密码不一致，请重新输入.'   
    }    
});
	};
</script>
<div class="easyui-layout" data-options="fit:true">
	<div data-options="region:'north',border:false"
		style="border-bottom:1px solid #ddd;height:35px;padding:2px 5px;background:#fafafa;">
		<div style="float:left;padding-top:3px;">
			<a id="addUser" href="#" class="easyui-linkbutton"
				data-options="plain:true,iconCls:'icon-add'">添加用户</a> <a
				id="delUser" href="#" class="easyui-linkbutton"
				data-options="plain:true,iconCls:'icon-remove'">删除用户</a>
				<a id="updateUser" href="#" class="easyui-linkbutton"
				data-options="plain:true,iconCls:'icon-edit'">修改用户</a> 
		</div>
		<div style="float:right;padding-top:3px;">
			<input id="ptShearch" class="easyui-searchbox"
				data-options="prompt:'请输入查询值',menu:'#mm',searcher:doSearch"
				style="width:300px;"></input>
			<div id="mm" style="width:120px;margin-right:2px;">
				<div data-options="name:'loginName'">登陆名称</div>
			</div>
		</div>
	</div>
	<div data-options="region:'center',border:false">
		
		<table id="ptList" class="easyui-datagrid"
			data-options="url:'./user/getUsersList.do',pageSize:15,pageList:[15,20,25,30],fitColumns:true,singleSelect:false,pagination:true,fit:true,rownumbers:true">
			<thead>
				<tr>
				    <th data-options="field:'ck',checkbox:true"></th>
					<th data-options="field:'uid',width:40,hidden:true">ID</th>
					<th data-options="field:'loginName',width:150,halign:'center'">登陆名称</th>
					<th data-options="field:'treeFarm',width:150,halign:'center',formatter:function(value, row, index) {if (row.treeFarm) {return row.treeFarm.tfname;}else {return value;}}">所属林场名称</th>
					<th data-options="field:'realName',width:150,halign:'center'">真实姓名</th>
					<th data-options="field:'telephone',width:150,halign:'center'">联系方式</th>
					
				</tr>
			</thead>
		</table>
	</div>
	<div id="UserWin" class="easyui-window" title="添加用户分类"
		style="width:400px;height:300px;"
		data-options="minimizable:false,maximizable:false,resizable:false,collapsible:false,modal:true,closed:true,inline:true,draggable:false">
		<form id="UserForm" method="post" onsubmit="{return false;}"
			action="">
			<input type="hidden" id="uidVDB" name="uid" />
			<table
				style="width:350px;height:250px;font-family: Tahoma,Geneva,'微软雅黑','宋体';">
				
				<tr>
					<td align="right" width="80px;">登陆名称</td>
					<td style="padding-left:10px;"><input id="loginNameVDB"
						name="loginName" class="easyui-validatebox"
						data-options="required:true,validType:'length[2,20]'" 
						style="width:250px;height:25px;" />
					</td>
				</tr>
				<tr>
					<td align="right" width="80px;">登陆密码</td>
					<td style="padding-left:10px;">
					<input id="hidePwd"  name="loginPwd" type="hidden"  />
					<input id="loginPwdVDB"
						name="loginPwd" class="easyui-validatebox"
						data-options="required:true,validType:'length[2,20]'" type="password"
						style="width:250px;height:25px;" />
					</td>
				</tr>
				<tr>
					<td align="right" width="80px;">验证密码</td>
					<td style="padding-left:10px;"><input id="loginPwd" type="password" class="easyui-validatebox"     
                        required="required" validType="equals['#loginPwdVDB']" 
                        style="width:250px;height:25px;"/>  

					</td>
				</tr>
				
				
				<tr>
					<td align="right" width="80px;">权限管理</td>
					<td style="padding-left:10px;">
						林业局<input type="radio" id="lyj"  name="qx" value="1" onclick="lyj" />
						     林场<input type="radio" id="lc"   name="qx" value="2"  onclick="lc"/>
						 <input id="tfckbox" class="easyui-combobox" name="tfid" style="width:135px;height:29px;"
								data-options="valueField: 'tfid',textField: 'tfname',url:'./treeFarm/getTreeFarmByAuthority.do',editable:false" value="请选择" />    
					 </td>
				</tr>
				<tr>
					<td align="right" width="80px;">联系方式</td>
					<td style="padding-left:10px;"><input id="telephoneVDB"
						name="telephone" class="easyui-validatebox"
						data-options="required:true,validType:'length[2,20]'"
						style="width:250px;height:25px;" />
					</td>
				</tr>
				<tr>
					<td align="right" width="80px;">真实姓名</td>
					<td style="padding-left:10px;"><input id="realNameVDB"
						name="realName" class="easyui-validatebox"
						style="width:250px;height:25px;" />
					</td>
				</tr>
				
				<tr align="center">
					<td colspan="2"><a id="saveUser" href="#"
						class="easyui-linkbutton" data-options="iconCls:'icon-save'">保  存</a>
						<a id="noUser" href="#" class="easyui-linkbutton"
						data-options="iconCls:'icon-cancel'">取  消</a>
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>

u012223660 2014-01-03

打赏
举报

引用 1 楼 a274295732 的回复:

我建议你把html代码发上来

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <title>森林防护安检信息系统</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/> <script type="text/javascript" src="easyui/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/easyui-lang-zh_CN.js"></script> <link href="css/global.css" rel="stylesheet" type="text/css" /> <link href="css/css.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> // 搜索框查询事件 function doSearch(value, name) { alert(value+":"+name) $("#ptList").datagrid("options").queryParams = { tfName : name, tfValue : value }; $("#ptList").datagrid("reload"); } // 远程加载渲染完毕后执行方法。 $.parser.onComplete = function() { // 添加按钮事件 $("#addUser").bind("click", function() { $("#UserWin").window("setTitle","添加林场分类"); $("#UserWin").window("open"); }); // 取消按钮事件 $("#noUser").bind("click", function() { $("#UserWin").window("close"); }); //修改按钮事件 $("#updateUser").bind("click", function() { // 修改窗口标题 $("#UserWin").window("setTitle","修改林场分类"); // 获取当前选择行，如果为空则提示 var column = $("#ptList").datagrid("getSelected"); if(column){ $("#uidVDB").attr("value",column.uid); $("#tfckbox").combobox("select",column["treeFarm"].tfid); $("#loginNameVDB").attr("value",column.loginName); $("#realNameVDB").attr("value",column.realName); $("#telephoneVDB").attr("value",column.telephone); $("#hidePwd").attr("value",column.loginPwd); $("#remarkVDB").attr("value",column.remark); // 去掉林场名称验证 $("#UserWin").window("open"); }else{ $.messager.alert('警告','请选择需要操作的数据!'); } }); //权限管理 //删除按钮事件 $("#delUser").bind("click", function() { var array = $("#ptList").datagrid("getSelections"); var idStr=""; for(var i=0; i<array.length; i++){ if(i!=array.length-1){ idStr += array[i].uid+","; }else{ idStr+= array[i].uid; } } if(idStr == ""){ $.messager.alert("提示", "请选择要删除的记录！", "info"); }else { $.messager.confirm("询问", "您是否要删除当前选中记录？", function(b) { if(b){ // 执行删除的Ajax delete jQuery.ajax({ type:"post", url:"./user/delete.do?idStr="+idStr, success: function aa(data) { // 刷新当前数据窗格 $("#ptList").datagrid("reload"); } }); } }); } }); // 保存按钮事件 $("#saveUser").bind("click", function() { $("#UserForm").form("submit", { url : "user/saveOrAdd.do", onSubmit : function() { var isValid = $(this).form('validate'); if (!isValid) { $.messager.progress('close'); // 如果表单是无效的则隐藏进度条 } return isValid; // 返回false终止表单提交 }, success : function(data) { var data = eval('(' + data + ')'); // 将返回信息转换为JSON格式。 $.messager.alert("系统消息", data.message); if (data.success) { // 如果添加成功则关闭此窗口 $("#UserWin").window("close"); // 刷新当前数据窗格 $("#ptList").datagrid("reload"); } } }); }); // 监控编辑窗口事件，当窗口关闭时清空窗口内表单数据 $("#UserWin").window({ "onClose" : function() { $("#UserForm").form("clear"); } }); //验证密码 $("#cc").extend($.fn.validatebox.defaults.rules, { equals: { validator: function(value,param){ return value == $(param[0]).val(); }, message: '两次密码不一致，请重新输入.' } }); }; </script> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'north',border:false" style="border-bottom:1px solid #ddd;height:35px;padding:2px 5px;background:#fafafa;"> <div style="float:left;padding-top:3px;"> <a id="addUser" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'">添加用户</a> <a id="delUser" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'">删除用户</a> <a id="updateUser" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'">修改用户</a> </div> <div style="float:right;padding-top:3px;"> <input id="ptShearch" class="easyui-searchbox" data-options="prompt:'请输入查询值',menu:'#mm',searcher:doSearch" style="width:300px;"></input> <div id="mm" style="width:120px;margin-right:2px;"> <div data-options="name:'loginName'">登陆名称</div> </div> </div> </div> <div data-options="region:'center',border:false"> <table id="ptList" class="easyui-datagrid" data-options="url:'./user/getUsersList.do',pageSize:15,pageList:[15,20,25,30],fitColumns:true,singleSelect:false,pagination:true,fit:true,rownumbers:true"> <thead> <tr> <th data-options="field:'ck',checkbox:true"></th> <th data-options="field:'uid',width:40,hidden:true">ID</th> <th data-options="field:'loginName',width:150,halign:'center'">登陆名称</th> <th data-options="field:'treeFarm',width:150,halign:'center',formatter:function(value, row, index) {if (row.treeFarm) {return row.treeFarm.tfname;}else {return value;}}">所属林场名称</th> <th data-options="field:'realName',width:150,halign:'center'">真实姓名</th> <th data-options="field:'telephone',width:150,halign:'center'">联系方式</th> </tr> </thead> </table> </div> <div id="UserWin" class="easyui-window" title="添加用户分类" style="width:400px;height:300px;" data-options="minimizable:false,maximizable:false,resizable:false,collapsible:false,modal:true,closed:true,inline:true,draggable:false"> <form id="UserForm" method="post" onsubmit="{return false;}" action=""> <input type="hidden" id="uidVDB" name="uid" /> <table style="width:350px;height:250px;font-family: Tahoma,Geneva,'微软雅黑','宋体';"> <tr> <td align="right" width="80px;">登陆名称</td> <td style="padding-left:10px;"><input id="loginNameVDB" name="loginName" class="easyui-validatebox" data-options="required:true,validType:'length[2,20]'" style="width:250px;height:25px;" /> </td> </tr> <tr> <td align="right" width="80px;">登陆密码</td> <td style="padding-left:10px;"> <input id="hidePwd" name="loginPwd" type="hidden" /> <input id="loginPwdVDB" name="loginPwd" class="easyui-validatebox" data-options="required:true,validType:'length[2,20]'" type="password" style="width:250px;height:25px;" /> </td> </tr> <tr> <td align="right" width="80px;">验证密码</td> <td style="padding-left:10px;"><input id="loginPwd" type="password" class="easyui-validatebox" required="required" validType="equals['#loginPwdVDB']" style="width:250px;height:25px;"/> </td> </tr> <tr> <td align="right" width="80px;">权限管理</td> <td style="padding-left:10px;"> 林业局<input type="radio" id="lyj" name="qx" value="1" onclick="lyj" /> 林场<input type="radio" id="lc"name="qx" value="2" onclick="lc"/> <input id="tfckbox" class="easyui-combobox" name="tfid" style="width:135px;height:29px;" data-options="valueField: 'tfid',textField: 'tfname',url:'./treeFarm/getTreeFarmByAuthority.do',editable:false" value="请选择" /> </td> </tr> <tr> <td align="right" width="80px;">联系方式</td> <td style="padding-left:10px;"><input id="telephoneVDB" name="telephone" class="easyui-validatebox" data-options="required:true,validType:'length[2,20]'" style="width:250px;height:25px;" /> </td> </tr> <tr> <td align="right" width="80px;">真实姓名</td> <td style="padding-left:10px;"><input id="realNameVDB" name="realName" class="easyui-validatebox" style="width:250px;height:25px;" /> </td> </tr> <tr align="center"> <td colspan="2"><a id="saveUser" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a> <a id="noUser" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a> </td> </tr> </table> </form> </div> </div>

Cocl 2014-01-03

打赏
举报

我建议你把html代码发上来

如何实现点击单选按钮，隐藏下拉框？

相关推荐