JS动态创建combobox

在平时的学习过程中没有怎么写过JS代码，因为不熟悉，所以多多少少对JS代码有一种恐惧。到了公司，铺天盖地的JS代码，简直让人哭笑不得。在这漫天都是JS代码的世界里，我也慢慢的见识了些许，以一个小功能先来热热身：

使用JS代码动态创建combobox，功能很简单就是使用ajax异步从后台获取数据，然后在前台显示就可是了，那么具体的JS代码如何写呢？后台的代码又如何写呢？

Js:

<span style="font-size:18px;">$dialog.find("select[name=materialunitid]").change(function() {
			if ($(this).val()) {
				$dialog.find("select[name=productid]").removeAttr("disabled");
				$.ajax({
					url: contextPath + "/jobcontent/getproductsbyunitid.do?unitid=" + $(this).val() + "&t=" + $.now(),
					async: false,
					dataType: "json",
					success: function(data) {
						var $select = $dialog.find("select[name=productid]").empty();
						$select.append(new Option("Select...", ""));
						if (data && data.length) {
							$.each(data, function(i, t) {
								$select.append(new Option(t.productname, t.id));
							});
						}
					}
				});
			} 
	}</span>

使用find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选；使用ajax动态的从后台获取要显示的数据；使用append方法动态添加Option。



Action：

<span style="font-size:18px;">	@RequestMapping("/getproductsbyunitid.do")
	@ResponseBody
	@Override
	public Object getProductsByUnitId(HttpServletRequest request) {
		String unitId = request.getParameter("unitid");
		List<DataProducts> results = jobContentService.queryEntities(
				DataProducts.class, null, DataProducts.PROP_MATERIALUNITID
						+ " = '" + unitId + "'", null, null, null);
		if (results != null && results.size() > 0) {
			return JSONArray.fromObject(results).toString();
		}
		return "[]";
	}</span>

使用HttpServletRequest从前台获取Id；根据Id到后数据库中去查询数据；将数据转换成JSON串传递到前台。



使用JS代码控制下拉框不可编辑功能：

方法一：

<span style="font-size:18px;">$('#cc').combobox({    
	required:true,    
	multiple:true,
	disabled:true  
}); </span>

方法二：

<span style="font-size:18px;">$('#cdeptno').combobox("disable");</span>

动态获取下拉框中被选中的值：

<span style="font-size:14px;">var unitname = $dialog.find("select[name=materialunitid] option:selected").text();</span>

总结：

写JS代码其实和写后台的代码没有什么太大的区别，理清思路，按照你的思路去写，多注意特定的获取方式就可以了。

下一篇：使用js动态创建datagrid,敬请期待！