Question

我有一个表单模板：

<form>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <div id="template">
    <input type="text" name="info[name][]" />
    <input type="text" name="info[address][]" />
    <input type="text" name="info[gender][]" />
  </div>
</form>

我想当select标签的值发生变化时（例如：从1变为2），id为TEMPLATE的div乘以2，就像这样。

<form>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <div id="template">
    <input type="text" name="info[name][]" />
    <input type="text" name="info[address][]" />
    <input type="text" name="info[gender][]" />
  </div>
  <div id="template">
    <input type="text" name="info[name][]" />
    <input type="text" name="info[address][]" />
    <input type="text" name="info[gender][]" />
  </div>
</form>

模板的数量必须与选择值匹配，如果选择值为1，那么只有1个模板div，如果是3，那么将有3个模板div。

有人知道如何使用jquery吗？

Answer 1

您可以使用像

这样的克隆选择的更改处理程序

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <div id="template">
    <input type="text" name="info[name][]" />
    <input type="text" name="info[address][]" />
    <input type="text" name="info[gender][]" />
  </div>
</form>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
 $("#grid").kendoGrid({
	selectable: "multiple cell",
	allowCopy: true,
	columns: [{
		field: "productName"
	}, {
		field: "category"
	}, {
		field: "a.id"
	}, {
		field: "a.name"
	}],
	dataSource: [{
		productName: "Tea",
		category: "Beverages",
		a: {
			id: 1,
			name: "1"
		}
	}, {
		productName: "Coffee",
		category: "Beverages",
		a: {
			id: 2,
			name: "2"
		}
	}, {
		productName: "Ham",
		category: "Food",
		a: {
			id: 3,
			name: "3"
		}
	}, {
		productName: "Bread",
		category: "Food",
		a: {}
	}]
});

$(document).ready(function() {
	var grid = $("#grid").data("kendoGrid");
	var dataSource = grid.dataSource;
	dataSource.at(0).productName = "Tet";
	dataSource.at(3).a = {
		id: 4,
		name: "4"
  };
	grid.setDataSource(dataSource);
});
  
</script>
</body>
</html>

将表单模板与Jquery相乘

1 个答案: