二级联动加动态input输入框实现思路

最新推荐文章于 2022-07-11 21:24:33 发布
最新推荐文章于 2022-07-11 21:24:33 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zq_3538/article/details/96335507
版权
java 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
前端
2 篇文章 0 订阅
订阅专栏

二级联动加动态input输入框实现思路

需求：通过配置使数据库存储过程可以通过前台页面调用

1：二级联动下拉选（任务分类—任务代码）;

2: 选择不同的任务带出相应存储过程的录入参数（input）;

1. 数据结构

  1. 数据库存储过程配置表主要字段：
任务分类代码分类名称任务代码任务名称存储过程存过入参存过出参执行状态有效标志
01基础数据同步0101同步平台机构GPINSERT.INSERTINTO[{‘index’:1,‘name’:‘日期’,‘type’:‘date’,‘value’:’?’}][{index:‘2’,type:‘str’,success:‘0’},{index:’’,type:‘str’,msg:’’}]01
  1. 字段说明
    • 存储过程： 要执行的存储过程名
    • 存过入参： 格式jsonArray [{index:参数位置,type:参数类型,name:‘页面显示名称’,value:’参数值‘}] 注：参数类型(str-字符,date-日期) ，参数值（可为具体值或’?’,?代表需要去页面传入）
    • 存过出参：格式jsonArray [{index:参数位置,type:参数类型,success:成功标志,msg:返回错误信息}]
      参数类型暂只支持str,一个参数位置不能既有success又有msg
    • 执行状态：状态校验，防止存过为执行完毕再次提交任务。

2. 程序设计

  1. Action 层设计思路

  • 查询配置好的是存过过程数据

  • 将分类代码和分类名称已Map的形式存入request作为第一个下拉选资源。

  • 将任务分类代码和任务代码相关数据关联以json字符串格式传入request，作为第二个下拉选资源，如：

    {‘01’:[{‘taskName’:‘准备金挂账（挂本月）’,‘taskCode’:‘0102’}],‘02’:[{‘taskName’:‘手续费挂账’,‘taskCode’:‘0201’},{‘taskName’:‘手续费结转挂账’,‘taskCode’:‘0202’},{‘taskName’:‘手续费认证挂账’,‘taskCode’:‘0203’},{‘taskName’:‘赔款挂账’,‘taskCode’:‘0204’},{‘taskName’:‘不含税保费挂账’,‘taskCode’:‘0205’},{‘taskName’:‘车船税挂账’,‘taskCode’:‘0206’},{‘taskName’:‘保费增值税挂账’,‘taskCode’:‘0207’},{‘taskName’:‘保费结转挂账’,‘taskCode’:‘0208’},{‘taskName’:‘再保挂账’,‘taskCode’:‘0209’}],‘03’:[{‘taskName’:‘保险卡自动保费销数’,‘taskCode’:‘0301’},{‘taskName’:‘手续费自动实付’,‘taskCode’:‘0302’},{‘taskName’:‘见费失败自动实收’,‘taskCode’:‘0303’},{‘taskName’:‘赔款自动实付’,‘taskCode’:‘0304’},{‘taskName’:‘保费自动销数’,‘taskCode’:‘0305’},{‘taskName’:‘保单自动实收’,‘taskCode’:‘0306’}],‘04’:[{‘taskName’:‘手续费资金状态回写’,‘taskCode’:‘0401’},{‘taskName’:‘回写赔款资金支付状态’,‘taskCode’:‘0402’},{‘taskName’:‘见费失败资金回写状态’,‘taskCode’:‘0403’},{‘taskName’:‘保费退款资金状态回写’,‘taskCode’:‘0404’},{‘taskName’:‘赔款支付自动送资金’,‘taskCode’:‘0405’},{‘taskName’:‘保费集中支付送资金’,‘taskCode’:‘0406’},{‘taskName’:‘保费送资金’,‘taskCode’:‘0407’}],‘05’:[{‘taskName’:‘同步资金账户’,‘taskCode’:‘0501’},{‘taskName’:‘险种同步’,‘taskCode’:‘0502’},{‘taskName’:‘同步总账汇率’,‘taskCode’:‘0503’},{‘taskName’:‘同步平台机构’,‘taskCode’:‘0504’}],‘06’:[{‘taskName’:‘调用批改存储过程的定时任务’,‘taskCode’:‘0601’},{‘taskName’:‘调用批改存储过程的定时任务’,‘taskCode’:‘0602’},{‘taskName’:‘调用承保存储过程的定时任务’,‘taskCode’:‘0603’},{‘taskName’:‘调用承保存储过程的定时任务’,‘taskCode’:‘0604’}],‘99’:[{‘taskName’:‘微客手续费自动支付’,‘taskCode’:‘9901’},{‘taskName’:‘关联交易信息提取’,‘taskCode’:‘9902’},{‘taskName’:‘收付凭证自动送财务’,‘taskCode’:‘9903’},{‘taskName’:‘见费出单回写保单信息’,‘taskCode’:‘9904’}]}

  • 将任务代码和参数数据关联以json字符串格式传入request，作为动态input资源，如：

    {‘0102’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘41’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0201’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘06’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0203’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0204’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0205’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘01’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0206’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘01’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0207’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘01’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0208’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0209’:[{‘index’:1,‘name’:‘凭证类型’,‘type’:‘str’,‘value’:‘04’},{‘index’:2,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’}],‘0301’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0302’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0303’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0304’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0305’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0306’:[{‘index’:1,‘name’:‘日期’,‘type’:‘str’,‘value’:’?’},{‘index’:2,‘name’:‘工号’,‘type’:‘str’,‘value’:‘0100000001’}],‘0503’:[{‘index’:1,‘name’:‘日期’,‘type’:‘date’,‘value’:’?’}],‘9903’:[{‘index’:1,‘name’:‘日期’,‘type’:‘date’,‘value’:’?’}],‘9904’:[{‘index’:1,‘name’:‘日期’,‘type’:‘date’,‘value’:’?’}]}

  1. jsp 页面相关方法设计
    1. 任务分类代码select 增加值改变事件，方法传入分类代码，通过分类代码解析Action层传入的 任务分类代码—任务代码资源json数据，动态生成任务代码下拉选
    2. 任务代码下拉选增加值改变事件，放入传入任务代码，通过分类代码解析Action层传入的任务代码—参数资源json数据，动态生成任务所需传入的input录入框。
    3. 执行方法，单击执行函数将相关参数拼接为 参数json资源和任务代码一块传入后台。

3 程序源码及效果图

  1. 效果图
    程序效果图

  2. 程序

    1. 自动任务处理 action

      public void prepareAutoImplement(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		GpJobTasksDto dto = new GpJobTasksDto();
		dto.setValidind("1");
		dto.setObject_OrderBy(" TASKCODE ");
		List<GpJobTasksDto> gpJobTasksDtoList = ServiceManager.payment.getGpPaymentSystemService().findGpJobTasksDto(dto);
		Map<String,String> classificationMap = new TreeMap<String,String>();
		StringBuffer jsonData = new StringBuffer("{");
		StringBuffer paramentData = new StringBuffer("{");
		GpJobTasksDto gpJobTasksDto = null;
		StringBuffer dataStr = null;
		Map<String, StringBuffer> dataMap =new TreeMap<String,StringBuffer>();
		for (int i = 0; i < gpJobTasksDtoList.size(); i++) {
			gpJobTasksDto =  gpJobTasksDtoList.get(i);
			String key = gpJobTasksDto.getClassificationCode();
			if(!classificationMap.containsKey(key))
				classificationMap.put(gpJobTasksDto.getClassificationCode(), gpJobTasksDto.getClassificationName());
			String parament = gpJobTasksDto.getIn_parameter();
			
			try{
				if(parament!=null&&!"".equals(parament.trim())){
					JSONArray jsonStr= new JSONArray(parament);
					if(i>0) paramentData.append(",");
					paramentData.append("'"+gpJobTasksDto.getTaskCode()+"':"+parament); 
				} 
	    	}catch (Exception e) {
	    		System.out.println(parament+"参数不合法");
	    		continue; 
	    	}
			
			if(dataMap.containsKey(key)){
				dataStr = dataMap.get(key);
				dataStr.append(",{'taskName':'"+gpJobTasksDto.getTaskName()+"',"+"'taskCode':'"+gpJobTasksDto.getTaskCode()+"'}");
			}else {
				dataStr = new StringBuffer();
				dataStr.append("{'taskName':'"+gpJobTasksDto.getTaskName()+"',"+"'taskCode':'"+gpJobTasksDto.getTaskCode()+"'}");
				dataMap.put(key, dataStr);
			}  
		}
		int i = 0;
		for (String key : dataMap.keySet()) {
			if(i++>0) jsonData.append(",");
			jsonData.append("'"+key+"':["+dataMap.get(key)+"]" ); 
		}
		jsonData.append("}");
		paramentData.append("}");	
		request.setAttribute("classificationMap", classificationMap);
		request.setAttribute("jsonData", jsonData); 
		request.setAttribute("paramentData", paramentData); 

}

    2. jsp 页面

      <html>
<head>
<jsp:include page="/common/StaticJavascript.jsp" />
 <script type="text/javascript" src="/common/js/json2.js"></script>
 <!-- <script type="text/javascript" src="/common/js/jquery.js"></script> -->
<link href="/common/css/Standard.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="initPage();">
	<html:form
		action="/payment/processPaymentSystem.do?actionType=autoImplementDeal">
		<table class="common" cellpadding="1" cellspacing="1" align="center">
			<thead>
			<tr class="top">
				<td colspan="4"><bean:message key="prompt.title.AutoTaskDeal" /></td>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td class="left">
					<bean:message key="prompt.tasktype" />
				</td>
				<td class="right">
				    <select name="gpJobTasksDtoClassificationCode" class=common style='width:80%' onchange="select1(this)">
					    <option>---</option>
					    <logic:iterate id="map1" name="classificationMap"> 
							<option value="<bean:write name="map1" property="key"/>">
								<bean:write name="map1" property="key"/>-<bean:write name="map1" property="value"/>
							</option>
						</logic:iterate> 
					</select> 
				</td>
				<td class="left"> 任务代码 </td>
				<td class="right">
					<input type="hidden" name="paramentData" value=" ">
					<select id="taskCode" name="gpJobTasksDtoTaskCode" class=common style='width:80%' onchange="paraments(this)">
						<option>---</option>
					</select> 
				</td>
			</tr>
			</tbody>
			<tfoot id='tfoot' ></tfoot>
		</table>
		<table border="0" cellpadding="5" cellspacing="0" class="common">
			<tr align="center">
				<td class="white"><input name="buttonQuery" id="confirmForm_a" type="button" onClick="confirmForm();"
					class="button" 
					value="<bean:message key="button.deal"/>" accesskey="q">
				</td>
				<td class="white"><input type="reset" class="button" onClick="resets()"
					value="<bean:message key="button.reset"/>" accesskey="r"></td>
			</tr>
		</table>
	</html:form>
	<app:codeInput />
</body>
<script language="javascript">
	var jsonData = <%= request.getAttribute("jsonData")%>;
	var paramentData = <%= request.getAttribute("paramentData")%>;
	var inputId = new Array();
	function select1(val) {
		var tfoot = document.getElementById("tfoot");
	    for(var i = tfoot.childNodes.length - 1; i >= 0 ;i--) {
			tfoot.removeChild(tfoot.childNodes[i]);
		}
		var select=document.getElementById("taskCode");
		select.length=1;
		if(val.value=="") return false;
		var classType = jsonData[val.value];
 		
 		for(var i=0;i<classType.length;i++){
			var codeData = classType[i]; 
			//console.log(codeData)
            var option=document.createElement("option");
            option.setAttribute("value",codeData['taskCode']);
            option.appendChild(document.createTextNode(codeData['taskCode']+"-"+codeData['taskName']));
            select.appendChild(option);
		}
	}
	
	function paraments(val){
	    inputId.length=0;
		var paraments = paramentData[val.value];
		var tfoot = document.getElementById("tfoot");
	    for(var i = tfoot.childNodes.length - 1; i >= 0 ;i--) {
			tfoot.removeChild(tfoot.childNodes[i]);
		}
		
		if (typeof paraments === "undefined") return false;
		var par = 0;
		var ntr ;
		for(var i=0;i<paraments.length;i++ ){
			var parament = paraments[i];
			var index = parament['index'];
			var name = parament['name'];
			var type = parament['type'];
			var value = parament['value'];
			if(value=="?"){  par++;
				 if(par%2==1) ntr =  document.createElement("tr");
				 var typeDate = "";
				 if(type=="date"|| name.search("日期")>-1 ) typeDate = "οnchange=checkFullDate(this); οnfοcus=calendar();";
				 var tdl = document.createElement("td");
				 tdl.className ='left';
				 tdl.innerHTML=name;
				 var tdr = document.createElement("td");
				 tdr.className ='right';
				 tdr.innerHTML= "<input type='text' id='"+ index + "' class='common' style='width:80%' " + typeDate + ">" ;
				 ntr.appendChild(tdl); ntr.appendChild(tdr);
				 if(par%2==0) tfoot.appendChild(ntr);
				 //添加id到inputId
				 inputId[par-1]=index;
			}
		}
		if(par%2==1){
		   var tdl = document.createElement("td");
		   tdl.className ='left';
		   var tdr = document.createElement("td");
		   tdr.className ='right';
		   ntr.appendChild(tdl); ntr.appendChild(tdr);
		}
		//console.log(html)
		tfoot.appendChild(ntr);
	}
	
	function resets(){
	 	inputId.length=0;
		var tfoot = document.getElementById("tfoot");
	    for(var i = tfoot.childNodes.length - 1; i >= 0 ;i--) {
			tfoot.removeChild(tfoot.childNodes[i]);
		}
	}
	
	function confirmForm() {
		var gpJobTasksDtoTaskCode = fm.gpJobTasksDtoTaskCode.value;
		var gpJobTasksDtoClassificationCode = fm.gpJobTasksDtoClassificationCode.value;
		if(gpJobTasksDtoTaskCode==""||gpJobTasksDtoClassificationCode==""){
			alert("请选择任务类型和任务代码");return false;
		}
	    var paraments = "";
		for(var i=0;i<inputId.length;i++){
			var id= inputId[i];
			paraments = paramentData[gpJobTasksDtoTaskCode];
			var input = document.getElementById(id);
			if(input.value==""){ alert("录入信息不全,请检查!"); return false;}
			for(var j=0;j<paraments.length;j++ ){
				var parament = paraments[j];
				var index = parament['index'];
				if(id==index){
					parament['value']=input.value;
				}
			}
		}
		//console.log( JSON.stringify(paraments));
		if(inputId.length>0){ 
			fm.paramentData.value = JSON.stringify(paraments);
		}else {
			fm.paramentData.value = paraments;
		}
		
		document.getElementById("confirmForm_a").disabled=true;
		fm.submit();
	}
</script>
</html>

    3. 任务执行主要代码

       public void autoImplementDeal(GpJobTasksDto gpJobTasksDto)throws Exception {
   		 
  	String inParamentJsonArray = gpJobTasksDto.getParamentJson();
     String outParamentJsonArray = gpJobTasksDto.getOut_parameter();
     String procedure = gpJobTasksDto.getDetail();
     StringBuffer callTheProcedure = new StringBuffer();
     callTheProcedure.append(procedure); 
 
     Map<String, String[]> parameterMap = null;
     if((inParamentJsonArray!=null&&!"".equals(inParamentJsonArray))||(outParamentJsonArray!=null&&!"".equals(outParamentJsonArray)) ){
         parameterMap = this.parameterMap(inParamentJsonArray,outParamentJsonArray);
     } 
     int parameterMapSize = 0; 
     if(parameterMap != null) parameterMapSize= parameterMap.size();
 
     for (int i = 1; i <= parameterMapSize; i++) {
         if(parameterMapSize==1){
             callTheProcedure.append("(?)");
         }else if(i==1){ 
             callTheProcedure.append("(?");
         }else if(i>1&&i<parameterMap.size()){
             callTheProcedure.append(",?");
         }else if(i==parameterMap.size()){
             callTheProcedure.append(",?)");
         }
     }
 
     //执行存过
     JdbcTemplate jdbcTemplate = this.getJdbcTemplate();
     CallableStatement proc = null;
     Connection conn = null;
     try {
         String[] out_success = new String[]{"",""};
         String[] out_msg = new String[]{"",""};
         conn = jdbcTemplate.getDataSource().getConnection();	        
         conn.setAutoCommit(false);
         proc = conn.prepareCall("{call "+callTheProcedure.toString()+"}"); // 调用存储过程 
 
         for (int i = 1; i <= parameterMapSize; i++) {
             String[] value = parameterMap.get(String.valueOf(i));
             if("in".equals(value[0])){
                 if("str".equals(value[1])){
                     proc.setString(i, value[2]);
                 }else if("date".equals(value[1])) {
                     proc.setDate(i, Date.valueOf(value[2]));
                 }	
             }
             if("out".equals(value[0])){
                 proc.registerOutParameter(i,Types.VARCHAR);
                 if("msg".equals(value[1])){
                     out_msg[0] = String.valueOf(i); 
                     out_msg[1] = value[2];
                 }
                 if("success".equals(value[1])){
                     out_success[0] = String.valueOf(i); 
                     out_success[1] = value[2];
                 }
             }	
         }
         proc.execute(); //执行
         if(!"".equals(out_success[0])){
             out_success[0] = proc.getString(Integer.parseInt(out_success[0]));
         }
         if(!"".equals(out_msg[0])){
             out_msg[1] = proc.getString(Integer.parseInt(out_msg[0]));
         }
         if (!out_success[0].equals(out_success[1])){
             conn.rollback();
             ServiceManager.payment.getGpPOAFindService().throwException(out_msg[1]);
         }
         else{
             conn.commit();
         }
     }
     catch (Exception e)
     {
         if (conn != null)
         {
             conn.rollback();
         }
         throw e;
     }
     finally{
         if (proc != null){
             try{
                 proc.close();
             }
             catch (Exception e){
                 logger.error("GpPaymentMainDaoHibernateImpl.executePaymentVerify Close proc error:" + e);
             }
             proc = null;
         }
         if (conn != null){
             try{
                 conn.close();
             }
             catch (Exception e){
                 logger.error("GpPaymentMainDaoHibernateImpl.executePaymentVerify Close conn error:" + e);
             }
             conn = null;
         }
     } 
 		
 }
 	
 public Map<String, String[]> parameterMap(String inParameterJsonArray,String outParameterJsonArray ) throws Exception{
     Map<String,String[]> parameterMap = new HashMap<String, String[]>();
     if(inParameterJsonArray!=null&&!"".equals(inParameterJsonArray)){
         JSONArray inParameterJsons = new JSONArray(inParameterJsonArray);
         for(int i=0;i<inParameterJsons.length();i++){
             JSONObject parameterJson = (JSONObject)inParameterJsons.get(i);
             String index = parameterJson.getString("index"); 
             String type = parameterJson.getString("type"); 
             String value = parameterJson.getString("value"); 
             if("str".equals(type)||"date".equals(type) ){
                 if(parameterMap.containsKey(index)){
                     throw new Exception("参数配置错误，请联系管理员");
                 }else {
                     parameterMap.put(index, new String[]{"in",type,value});
                 }
             } else {
                 throw new Exception("仅支持入参为字符和日期格式的存过，请联系管理员");
             }
 
         }	
     }
     if(outParameterJsonArray!=null&&!"".equals(outParameterJsonArray)){
         JSONArray outParameterJsons = new JSONArray(outParameterJsonArray);
         for(int i=0;i<outParameterJsons.length();i++){
             JSONObject parameterJson = (JSONObject)outParameterJsons.get(i);
             String index = parameterJson.getString("index");
             String type = parameterJson.getString("type");
 
             String success = null,msg=null,key=null ;
             for (Iterator iterator = parameterJson.keys(); iterator.hasNext();) {
                 key = (String) iterator.next();
                 if ("success".equals(key)) {
                     success = parameterJson.getString(key);
                 }
                 if ("msg".equals(key)) {
                     msg = parameterJson.getString(key);
                 } 
                 if(success!=null && msg!=null ){
                     throw new Exception("参数配置错误，请联系管理员");
                 }
             }	
 
             if("str".equals(type)){
                 if(parameterMap.containsKey(index)){
                     throw new Exception("参数配置错误，请联系管理员");
                 }else {
                     if(success!=null){
                         parameterMap.put(index,new String[]{"out","success",success});
                     }
                     if (msg!=null) {
                         parameterMap.put(index,new String[]{"out","msg","成功"});
                     } 
                 }
             } else {
                 throw new Exception("出参仅支持字符型,请联系管理员！");
             }
         }
 
     }
     return parameterMap;
 }
 
 ```
有点犇
关注
专栏目录
二级相互联动（前后台）
changhenshui1990的博客
03-14 1454
1.以货物大类和细类为例 1.1 &lt;input type="hidden" id="keyword_id_GoodsType_GoodsTypeClassifyInfo" value="" /&gt; &lt;!-- 货物大类 --&gt; &lt;input type="hidden" id="keyword_id_GoodsType_GoodsTypeInfo&qu
js基础-input对象，select对象，实例：二级联动菜单
cjy082322的博客
05-29 1340
input对象 一个标记，就是一个input对象。 1、input对象的属性(以type=text为例) l name：表单元素的名称。 l value：表单元素的值，用户输入的内容，可以通过该属性来获取。 l size：表单的长度。 l maxlength：表单元素的最大长度(最多可输的字符数)。 l disabled：禁用属性。 l readonly：只读属性。   2、i
input框省市区三级联动选择
11-08
使用单输入框来进行省市区三级联动的选择，更适合于移动端设备
一个简单的二级联动
顺子网络 PHP网站建设
06-08 989
dim rsdim sqldim countdim rs1dim sql1sql = "SELECT * FROM class where parentidvar onecount;onecount=0;subcat = new Array();        subcat[] = new Array("","","");        onecount=; function changel
地区二级联动+input模糊查询
lz0410的博客
09-05 1335
var TempArr=[];//存储option   $(function(){       /*先将数据存入数组*/       $("#province option").each(function(index, el) {           TempArr[index] = $(this).text();       });       $(document).bind('c
拉选择框与输入框联动 直接添加选中值到输入框
04-17
拉选择框与输入框联动 直接添加选中值到输入框
二级联动的智能输入框
weixin_34295316的博客
03-22 440
智能输入框的应用在我们开发过程中十分普遍，最近遇到一个需求是制作一个二级联动的智能框，智能提示的内容是从后台获取的，用easyUi的combobox就可以完成，不过后来感觉用起来比较麻烦，就自己基于JQuery写了一个，分享一下 1.两个select输入框: 　　　　<form class="form-horizontal"> <div class=...
怎样实现二级联动菜单即可选择又可输入？？？
fengchi4040的博客
12-31 1827
各位大哥，请教一下怎样可以实现二级联动菜单即可选择又可输入？？ 比如我选择字母时二级菜单可选择A,B..... 如果我选择”其他“时二级菜单怎样可以直接输入？？ 代码如下： Test function changedevice(){   var devices=new Array();   devices['字母']=['A','B','C','D','E','F'];
一个简单的二级联动效果，看完之后立马你也可以写一个（有源码，纯js，带注释）
Seven_qihaibing的博客
04-28 713
选择 -请选择- 即使互动 光影无限 乐客渠道 -请选择- //onChange="getVal(this.options[this.selectedIndex].value)" //利用onChange事件，来获取当前选项的value //通过this.options拿到当前select的所有option选项 //通过this.select
微信小程序picker组件省市二级联动及其修改时进行回显
01-09
本篇文章将深入探讨`picker`组件在实现省市二级联动以及修改时回显的效果，这对于构建交互良好的用户界面至关重要。 一、`picker`组件基本使用 `picker`组件是微信小程序内置的一种UI组件，它为用户提供了一个滚动...
jQuery使用EasyUi实现三级联动下拉框效果
11-30
例如，二级联动下拉框的创建和更新如下： ```javascript var piperowCombx = $("#txtPipeRowName").combobox({ loader: function(param, success, error) { // 与一级联动类似，加载二级数据... }, onSelect: ...
【面试题】vue实现二级联动（好像也不算二级联动）
牛晓林的博客
12-24 567
需求就是上面的的了。 以下是我的实现： 代码实现 反思： 题没看清，数量那个地儿应该是输入框，我给弄成了下拉框 不熟练，一直得百度，一直得改bug，也才到这样一个效果 贴个代码记录一下： <!-- 第一个下拉框 --> <select name="radioOrCheckbox" id="radioOrCheckbox" v-model="value1" @change="...
实现省、市、区三级联动的输入框
huxiy1995的博客
12-04 2472
先来说说我最终的实现方法吧。 首先，可以从这里 下载获得，json文件很长很长，所以我将其作为JSON文件存储在工程下。 js读取json文件的方法有两种，一种通过Ajax，另一种通过Jquery的$.getJSON方法实现，我选取的是第二种。 然后，js代码如下： $.getJSON("../js/region.json", "", function(data) {　 //
json数据 二级联动
weixin_30596023的博客
09-14 372
1 <head> 2 <link href="static/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" /> 3 <link href="static/bootstrap-table/bootstrap-table.css" rel="styleshe...
php输入框联动,实现输入框与下拉框联动效果
weixin_28802509的博客
03-17 539
这次给大家带来实现输入框与下拉框联动效果，实现输入框与下拉框联动效果的注意事项有哪些，下面就是实战案例，一起来看一下。如图：html代码奖励类型：---请选择---{foreach $reward as $value}{$value['material_name']}{/foreach}JQuery代码$('#reward').bind('input propertychange', functi...
JavaScript实现(二级联动，购物车)
m0_63300795的博客
04-13 832
一，二级联动 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>三级联动</title> </head> <body onload="fa()"> <!-- 定义下拉框 --> <label>省份:</label> <select id="sa" onchange...
html 输入框联动显示,js下拉选择框与输入框联动实现添加选中值到输入框的方法...
weixin_33195817的博客
06-04 706
本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法。分享给大家供大家参考。具体如下：这里演示js下拉选择框与输入框联动，直接添加选中值到输入框中的效果。这种效果相信不少朋友见到过吧，省去用户输入的麻烦，这里使用JS直接将值赋予输入框，了解原理之后，可灵活运用，扩展出更多的特效来。运行截图如下：在线演示地址如下：具体代码如下：下拉选择框与输入框联动，直接添加选中值到输入框请选择un...
二级省级联动的实现
weixin_45419710的博客
07-25 259
JavaScript实现二级省级联动 js代码如下： // An highlighted block var shengfengarr=["陕西","四川","上海"] var cityarr=[ ["西安市","宝鸡市","渭南市","汉中市"], ["成都市","攀枝花市","乐山市"], ["黄浦区","静安区","浦东区"] ] //添加省份 ...
element 和 input 实现省市区层级联动
weixin_60332880的博客
07-11 247
element 和 input 实现省市区层级联动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值