问题描述
- 页面中多个input select，想要每个inpu中显示不同内容，该怎么做？
- 使用Jquery Ztree 页面中多个input select，想要每个inpu中显示不同内容，该怎么做？
<!DOCTYPE html><HTML><HEAD> <TITLE> ZTREE DEMO - radio select menu</TITLE> <meta http-equiv=""content-type"" content=""text/html; charset=UTF-8""> <link rel=""stylesheet"" href=""../../../css/demo.css"" type=""text/css""> <link rel=""stylesheet"" href=""../../../css/zTreeStyle/zTreeStyle.css"" type=""text/css""> <script type=""text/javascript"" src=""../../../js/jquery-1.4.4.min.js""></script> <script type=""text/javascript"" src=""../../../js/jquery.ztree.core-3.5.js""></script> <script type=""text/javascript"" src=""../../../js/jquery.ztree.excheck-3.5.js""></script><!-- <script type=""text/javascript"" src=""../../../js/jquery.ztree.exedit-3.5.js""></script>--> <SCRIPT type=""text/javascript""> <!-- var setting = { check: { enable: true chkStyle: ""radio"" radioType: ""all"" } view: { dblClickExpand: false } data: { simpleData: { enable: true } } callback: { onClick: onClick onCheck: onCheck } }; var zNodes =[ {id:1 pId:0 name:""北京""} {id:2 pId:0 name:""天津""} {id:3 pId:0 name:""上海""} {id:6 pId:0 name:""重庆""} ]; var zNodes1 =[ {id:4 pId:0 name:""河北省"" open:true nocheck:true} {id:41 pId:4 name:""石家庄""} {id:42 pId:4 name:""保定""} {id:43 pId:4 name:""邯郸""} {id:44 pId:4 name:""承德""} ]; function onClick(e treeId treeNode) { var zTree = $.fn.zTree.getZTreeObj(""treeDemo""); zTree.checkNode(treeNode !treeNode.checked null true); return false; } function hideMenu() { $(""#menuContent"").fadeOut(""fast""); $(""body"").unbind(""mousedown"" onBodyDown); } function onBodyDown(event) { if (!(event.target.id == ""menuBtn"" || event.target.id == ""citySel"" || event.target.id == ""menuContent"" || $(event.target).parents(""#menuContent"").length>0)) { hideMenu(); } } $(document).ready(function(){ $.fn.zTree.init($(""#treeDemo"") setting zNodes); $.fn.zTree.init($(""#treeDemo1"") setting zNodes1); }); function onCheck(e treeId treeNode) { var zTree = $.fn.zTree.getZTreeObj(""treeDemo"") nodes = zTree.getCheckedNodes(true) v = """"; for (var i=0 l=nodes.length; i<l; i++) { v += nodes[i].name + ""; } if (v.length > 0 ) v = v.substring(0 v.length-1); //var cityObj = $(""#citySel""); currentObj.attr(""value"" v);////////使用变量存储的input对象 } var currentObj;////////////存储当前操作的input对象 function showMenu(o) { var cityObj = $(o); if (o.tagName == 'A') cityObj = cityObj.parent().find('input');//点击的是连接，获取和连接对应的input对象 currentObj=cityObj/// var cityOffset = cityObj.offset(); $(""#menuContent"").css({ left: cityOffset.left + ""px"" top: cityOffset.top + cityObj.outerHeight() + ""px"" }).slideDown(""fast""); var treeObj = $.fn.zTree.getZTreeObj(""treeDemo""); var nodes = treeObj.getSelectedNodes(); if (nodes.length > 0) treeObj.checkNode(nodes[0] false null false);//取消ztree的选择 $(""body"").bind(""mousedown"" onBodyDown); } //--> </SCRIPT> <style type=""text/css""> </style> </HEAD><BODY><h1>带 radio 的单选下拉菜单 -- zTree</h1><h6>[ 文件路径: super/select_menu_radio.html ]</h6><div class=""content_wrap""> <div class=""zTreeDemoBackground left""> <ul class=""list""> <li class=""title""> <span class=""highlight_red"">勾选 radio 或者 点击节点 进行选择</span></li> <li class=""title""> Test: <input id=""citySel"" type=""text"" readonly value="""" style=""width:120px;"" onclick=""showMenu(this);"" /> <a id=""menuBtn"" href=""#"" onclick=""showMenu(this); return false;"">select</a> </li> <li class=""title""> Test: <input id=""citySel"" type=""text"" readonly value="""" style=""width:120px;"" onclick=""showMenu(this);"" /> <a id=""menuBtn"" href=""#"" onclick=""showMenu(this); return false;"">select</a> </li> <li class=""title""> Test: <input id=""citySel"" type=""text"" readonly value="""" style=""width:120px;"" onclick=""showMenu(this);"" /> <a id=""menuBtn"" href=""#"" onclick=""showMenu(this); return false;"">select</a> </li> </ul> </div> <div class=""right""> <ul class=""info""> <li class=""title""><h2>实现方法说明</h2> <ul class=""list""> <li>用 radio 也可以轻松实现单选的下拉菜单</li> <li>单选其实没有必要使用 radio 此 Demo 主要用于 和 其他下拉菜单进行对比</li> </ul> </li> </ul> </div></div><div id=""menuContent"" class=""menuContent"" style=""display:none; position: absolute;""> <ul id=""treeDemo"" class=""ztree"" style=""margin-top:0; width:180px; height: 300px;""></ul></div><div id=""menuContent"" class=""menuContent"" style=""display:none; position: absolute;""> <ul id=""treeDemo1"" class=""ztree"" style=""margin-top:0; width:180px; height: 300px;""></ul></div></BODY></HTML>
解决方案
这里不是回复过了，你到底要先干嘛？http://ask.csdn.net/questions/194775
时间： 2024-08-17 18:45:18