Layuiダイナミックレンダリングドロップダウンボックス

14296 ワード

この例にはテストページコードが含まれています.ツールメソッドはselectUtilのみです.

<html>
	<head>
		<meta charset="utf-8">
		<title>Layui title>
		<link rel="stylesheet" href="../../layui/css/layui.css" />
		<style>
			body {
				padding: 18px;
			}
		style>
	head>
	<body>
		<form class="layui-form">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label"> label>
					<div class="layui-input-inline">
						<select id="select_type">select>
					div>
				div>
			div>
		form>
	body>
	<script src="../../layui/layui.js">script>
	<script>
		layui.use(['form'], function() {
			var $ = layui.$,
				form = layui.form;
			//  
			var datas = [];
			for (var i = 0; i < 40; i++) {
				datas.push({
					id: i,
					text: 'text_' + i
				});
			}
			// 
			selectUtil.render({
				id: 'select_type',
				data: datas
			});
		});
	script>
	<script>
		//  Layui 
		var selectUtil = {
			render: function(param) {
				var $ = layui.$,
					form = layui.form;
				var id = param.id,
					prop = param.prop || {
						id: 'id',
						text: 'text'
					},
					datas = param.data || [];
				var $select = $('#' + id);
				// 
				$select.empty();
				$.each(datas, function(index, item) {
					var $option = $(' item[prop.id] + '">' + item[prop.text] + '');
					$select.append($option);
				});
				form.render('select');
			}
		}
	script>
html>