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 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!

Related labels：

jquery element Add to

source：php.cn

Previous article：How to change P tag text value in jQuery Next article：By creating tags in js dynamics and setting attribute methods (detailed tutorial)

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

• Problems with pop-up windows not being centered in weebox
  2018-06-23 18:19:43
• How to use excel-like components in vue+canvas
  2018-06-23 18:17:39
• How to call class in JavaScript
  2018-06-23 18:11:37
• How to implement pull-up refresh function using Vue framework
  2018-06-23 18:10:14
• How to implement image cropping component using Vue mobile terminal
  2018-06-23 18:06:43
• About WeChat mini program templates and modular usage (detailed tutorial)
  2018-06-23 18:04:28
• How to implement pull-up loading function in vue2
  2018-06-23 18:02:45
• How to implement three-level linkage using Vue2
  2018-06-23 18:00:45
• How to implement data request display loading graph in vue2
  2018-06-23 17:58:23
• How to set up and monitor using element full screen
  2018-06-23 17:56:41

Latest Issues

Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...

From 2024-04-06 14:54:03

0

2

421

How to retrieve values ​​of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...

From 2024-04-05 09:26:49

0

1

1418

Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...

From 2024-04-04 18:40:04

0

1

3528

I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...

From 2024-04-04 17:27:27

0

1

417

Unable to send form data on Safari/Firefox iOS This works on all platforms except Safari/Firefox on iOS: jQuery("#gform_1").one...

From 2024-04-04 12:53:48

0

1

303

Related Topics

More>

• What are the jquery plug-ins?
• How to find the maximum and minimum value of array elements in Java
• How to operate json with jquery
• How to delete elements in jquery
• Use of jQuery hover() method
• jquery implements paging method
• What is a hidden element in jquery
• What is highlighting in jquery

Popular Recommendations

• what does js mean
• How to convert string to array in js?
• How to refresh the page using javascript
• How to delete an item in js array
• How to use sqrt function

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

• 
  The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

  1417202
• 
  PHP introductory tutorial one: Learn PHP in one week

  4258074
• 
  JAVA Beginner's Video Tutorial

  2478708
• 
  Little Turtle's zero-based introduction to learning Python video tutorial

  504072
• 
  PHP zero-based introductory tutorial

  844305

• 
  The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

  1417202 times of learning
• 
  JAVA Beginner's Video Tutorial

  2478708 times of learning
• 
  Little Turtle's zero-based introduction to learning Python video tutorial

  504072 times of learning
• 
  Quick introduction to web front-end development

  215304 times of learning
• 
  Master PS video tutorials from scratch

  877813 times of learning

• 
  [Web front-end] Node.js quick start

  6438 times of learning
• 
  Complete collection of foreign web development full-stack courses

  5060 times of learning
• 
  Go language practical GraphQL

  4260 times of learning
• 
  550W fan master learns JavaScript from scratch step by step

  633 times of learning
• 
  Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours

  21629 times of learning

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

• [form button] jQuery enterprise message form contact code
• [Player special effects] HTML5 MP3 music box playback effects
• [Menu navigation] HTML5 cool particle animation navigation menu special effects
• [form button] jQuery visual form drag and drop editing code
• [Player special effects] VUE.JS imitation Kugou music player code
• [html5 special effects] Classic html5 pushing box game
• [Picture special effects] jQuery scrolling to add or reduce image effects
• [Photo album effects] CSS3 personal album cover hover zoom effect

• [Front-end template] Home Decor Cleaning and Repair Service Company Website Template
• [Front-end template] Fresh color personal resume guide page template
• [Front-end template] Designer Creative Job Resume Web Template
• [Front-end template] Modern engineering construction company website template
• [Front-end template] Responsive HTML5 template for educational service institutions
• [Front-end template] Online e-book store mall website template
• [Front-end template] IT technology solves Internet company website template
• [Front-end template] Purple style foreign exchange trading service website template

• [PNG material] Cute summer elements vector material (EPS PNG)
• [PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)
• [banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)
• [PNG material] Golden graduation cap vector material (EPS PNG)
• [PNG material] Black and white style mountain icon vector material (EPS PNG)
• [PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses
• [banner picture] Flat style Arbor Day banner vector material (AI+EPS)
• [PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)

• [Front-end template] Home Decor Cleaning and Repair Service Company Website Template
• [Front-end template] Fresh color personal resume guide page template
• [Front-end template] Designer Creative Job Resume Web Template
• [Front-end template] Modern engineering construction company website template
• [Front-end template] Responsive HTML5 template for educational service institutions
• [Front-end template] Online e-book store mall website template
• [Front-end template] IT technology solves Internet company website template
• [Front-end template] Purple style foreign exchange trading service website template

About us Disclaimer Sitemap

php.cn：Public welfare online PHP training，Help PHP learners grow quickly！