JS动态创建combobox

来源：互联网发布：i7港版网络编辑：程序博客网时间：2024/05/17 04:50

在平时的学习过程中没有怎么写过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@Overridepublic 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,敬请期待！

2 0