Front-end: Apply js to select option within layer content

Keywords: Front-end

			 layer.open({
				  type: 1,
				  skin: 'layui-layer-rim', //Add borders
				  area: ['350px','400px'], //Width height
				 // btn: ['Submit','Cancel'],
				  content: "<div id='addwin'><table align='center'style='margin-top: 5px;'>"
			  			+"<tr>"
		  				+"<td>Place classification:</td>"
			  			+"<td><select id='locSel' name='locSel'>"
			  			+"<option value ='0'>whole</option>"
		                +"</select></td>"
			  			+"</tr>"
			  			+"<tr>"
		  				+"<td>Place code:</td>"
			  			+"<td><input type='text' id='localeCode'></td>"
			  			+"</tr>"
			  			+"<tr>"
		  				+"<td>Place name:</td>"
			  			+"<td><input type='text' id='localeName'></td>"
		  				+"</tr>"
		  				+"<tr>"
		  				+"<td>Store address:</td>"
			  			+"<td><input type='text' id='localeadd'></td>"
		  				+"</tr>"
			  			+"</table></div>",
			  		btn: ['Submission', 'cancel']
				  ,yes: function(index, layero){
					  var locSel =$("#locSel").val(); 
					  var localeCode =$("#localeCode").val();
					  var localeName =$("#localeName").val();
					  var localeadd =$("#localeadd").val();
					  alert(locSel);
				    	addlcoale(localeType);
				  }
				  ,btn2: function(index, layero){
				    layer.close(index);
				  }
			})

			for(var i =0;i<type_arr.length;i++){
  				var opt = type_arr[i];
  				$("#locSel").append("<option value='"+opt.type_id+"'>"+opt.type_name+"</option>");
  			}

Recently, using layer plug-in as the front-end pop-up box, I wanted to create a select drop-down box with js in content. At first, I didn't want to write js code directly in content. Because I used hi splicing html code to achieve content that jumped out of the box. I thought there was nothing wrong with this, but I fooled, the whole method body collapsed directly.

Later, I looked for the information and solved this small problem.

Solution: Stitching html code in content as usual. When splicing, create a < select id ='selectId'> </select > and then get the selection below (preferably after the layer.open method), and then loop through adding option s to select. The code went up, not very well.






Posted by xtops on Tue, 12 Feb 2019 06:42:18 -0800