使用jquery加ajax动态添加select的option子元素

场景

点击商品分类时动态添加 商品名称 由于商品分类不是过多 和商品名称 所以没用考虑太多的性能问题

前台 bootstrap模板

<div class="form-group">
	<label class="col-sm-2 control-label">商品分类</label>
	<div class="col-sm-10">
		<select id="commodityClassificationId" class="form-control" datatype="*">
			<option selected value="">---请选择---</option>
			[#if (commodityClassificationList)! ] [#list commodityClassificationList as commodityClassification]
			<option value="${commodityClassification.id}">${commodityClassification.classificationName}</option>
			[/#list] [/#if]
		</select>
	</div>
</div>
<div class="form-group">
	<label class="col-sm-2 control-label">商品名称</label>
	<div class="col-sm-10">
		<select id="commodityId" class="form-control" name="commodityId" datatype="*">
			<option selected value="">---请选择---</option>
		</select>
	</div>
</div>

使用jquery写得函数

<script>
	$(function() {
		$("#commodityClassificationId").change(function() {
			//获取获取被选中的id
			var idVal = $("#commodityClassificationId option:selected").val();
			//清空select的值
			$("#commodityId").empty();
			$.ajax({
				url: "${base}/back/wxmember/amyskyWxMemberCommodityDetail/getCommodity.jhtml",
				type: "POST",
				data: "id=" + idVal,
				success: function(ajaxJson) {
					if(ajaxJson.success) {
						//添加select第一个option
						$("#commodityId").append("<option selected value=''>---请选择---</option>");
						for(var i = 0; i < ajaxJson.obj.length; i++) {
							//添加option元素
							$("#commodityId").append("<option value='" + ajaxJson.obj[i].id + "'>" + ajaxJson.obj[i].commodityName + "</option>");
						}
					} else {
						alert(ajaxJson.msg);
					}
				}
			})
		})
	})
</script>

java后台代码

	/**
	 * 获取商品类型的
	 * 
	 * @return
	 */
	@ResponseBody
	@RequestMapping("getCommodity")
	public AjaxJson getCommodity(Long id) {
		AjaxJson j = new AjaxJson();
		try {
			if(id==null){
				j.setMsg("请稍重试");
				j.setSuccess(false);
				return j;
			}
			String sql = "select * from amysky_wx_member_commodity as a where  a.commodity_classification_id =?";
			List<AmyskyWxMemberCommodityEntity> commodityList = amyskyWxMemberCommodityService.queryListBySql(sql,
					AmyskyWxMemberCommodityEntity.class, id);
			if (null == commodityList) {
				commodityList = new ArrayList<AmyskyWxMemberCommodityEntity>();
			}
			j.setObj(commodityList);
			j.setMsg("查询成功");
			j.setSuccess(true);
		} catch (Exception e) {
			j.setMsg("系统繁忙,请稍后重试");
			j.setSuccess(false);
			e.printStackTrace();
		}
		return j;
	}

如若有更好的方法请联系我邮箱 [email protected]