bootstrap下利用ajax实现下拉框选择

最新推荐文章于 2025-05-24 16:13:40 发布

信天鸽

最新推荐文章于 2025-05-24 16:13:40 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： java JavaScript(js)

本文链接：https://blog.youkuaiyun.com/chaoleshan/article/details/79385603

java 同时被 2 个专栏收录

86 篇文章

订阅专栏

JavaScript(js)

11 篇文章

订阅专栏

本文介绍如何在Bootstrap环境下，结合Ajax技术，实现在网页中动态更新下拉框选项的功能。从jsp页面、JavaScript脚本到后端Java处理，详细阐述了各个部分的实现细节，旨在提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsp部分：

<label class="control-label col-sm-1" for="letterCd">信函模板代码</label>
						<div class='controls col-sm-2'>
							<select class="form-control " id="letterCd"
								 name="letterCd"></select>
						</div>
				</div>

js部分：

$(document).ready(function() {
	initDatatableList();
	getSmsModelName();
});

//加载信函模板代码【因为其他页面也用了这个JS，所以需要点击时加载】
function getSmsModelName() {
	
	var html;
	$.ajax({     
		url : ctx + "/pls/letterWork/getLetterTemplateCode.in",
		type : 'post',
		dataType : 'json',
		success : function(data) {
			html += "<option value = ''> - - 请选择 - - </option>";
			for (var i = 0; i < data.length; i++) {
				html += "<option value=" + data[i].letterCd+ ">"
				+ data[i].letterCd + "</option>";
			}
			$("#letterCd").html(html);
		}
	});

}

java部分：

	@RequestMapping(value = "getLetterTemplateCode.in")
	@ResponseBody
	public String getSmsModelName() {
		
		try {
			 return JSON.toJSONStringWithDateFormat(plsLetterWorkSufaceApi.getLetterTemplateCode(),
					DateFormatPatternConstants.DATETIME_DASH_COLON, SerializerFeature.WriteDateUseDateFormat);
		} catch (Exception e) {
			RespCode.E_001.exception(e.getMessage());
			logger.error("查询短信模板失败"+e.getMessage());
			return null;
		}		 
	}

	// 信函代码查询
	@Override
	public List<TmPrmLetter> getLetterTemplateCode() {
		return new JPAQueryFactory(em).select(qTmPrmLetter).from(qTmPrmLetter).where(qTmPrmLetter.letterType.eq("L")).fetch();
	}