Implement the method of adding and assigning tag sub-elements in jQuery

Below I will share with you a jQuery method for adding and assigning tag sub-elements. It has a good reference value and I hope it will be helpful to everyone.

1. Define the <select> tag in the jsp page, as follows:

<p>
<span>科室:</span>
<select class="dept-name-show" style="width: 70%;">
</select>
</p>

2. Write js Statement:

<script>
$(function () {
var dname = $(".dept-name-show").eq(0);//选定<select>标签
var url = "${pageContext.request.contextPath}/getDepts.do";//请求路径
$(".dept-name-show").click(function () {
$.get(
url,
function (res) {
var len = res.length;
var op = dname.children().length;
if (op < len) {
var pp = "<option></option>";
for (var i = 0; i < len; i++) {
dname.append(pp);
dname.children().eq(i).text(res[i].name);
}
}
}
)
})
})
</script>

3. Write the corresponding request statement:

List<Dept> deptList=null;
@RequestMapping(value = "/getDepts",method = {RequestMethod.GET})
public void getDepts(HttpServletResponse response) throws IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
if (deptList == null){
deptList = deptService.findAllDepts();
}else {
String res=JSON.toJSONString(deptList);
response.getWriter().write(res);
}
}

4. The implementation effect is as follows:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use ngrok express to solve WeChat interface debugging problems

How to use element-ui tables to make cells editable

How to clear the verification after closing the dialog in element ui

The above is the detailed content of Implement the method of adding and assigning tag sub-elements in jQuery. For more information, please follow other related articles on the PHP Chinese website!