jQuery實(shí)現(xiàn)標(biāo)簽子元素的添加和賦值方法

更新時(shí)間：2018年02月24日 09:57:47 作者：hacker_Lees

下面小編就為大家分享一篇jQuery實(shí)現(xiàn)標(biāo)簽子元素的添加和賦值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

一、在jsp頁面中定義<select>標(biāo)簽，如下：

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

二、編寫js語句：

<script>
$(function () {
var dname = $(".dept-name-show").eq(0);//選定<select>標(biāo)簽
var url = "${pageContext.request.contextPath}/getDepts.do";//請(qǐng)求路徑
$(".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>

三、編寫對(duì)應(yīng)的請(qǐng)求語句：

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);
}
}

四、實(shí)現(xiàn)效果如下：

以上這篇jQuery實(shí)現(xiàn)標(biāo)簽子元素的添加和賦值方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談jQuery before和insertBefore的區(qū)別
下面小編就為大家?guī)硪黄獪\談jQuery before和insertBefore的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-12-12
jQuery?UI組件介紹
這篇文章介紹了jQuery的UI組件，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
jquery自定義表格樣式
這篇文章主要介紹了jquery如何自定義表格樣式，分別實(shí)現(xiàn)三種樣式：默認(rèn)狀態(tài)（灰白相間），鼠標(biāo)懸浮狀態(tài)（綠色），鼠標(biāo)點(diǎn)擊狀態(tài)（黃色），感興趣的小伙伴們可以參考一下
2015-11-11
jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁的方法
這篇文章主要介紹了jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁的方法,以實(shí)例形式較為詳細(xì)的分析了本地分頁的原理與相關(guān)的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-02-02
解決自定義$(id)的方法與jquery選擇器$沖突的問題
最近網(wǎng)站改版，原來的js都是原生js，因?yàn)楫?dāng)前比較jquery而且他的組件也比較多，使用方便，所以我們也采用了jquery但跟原來的$(id)沖突，經(jīng)過網(wǎng)絡(luò)很多人的推薦我們選擇了這個(gè)方法
2014-06-06
用jquery獲取自定義的標(biāo)簽屬性的值簡單實(shí)例
下面小編就為大家?guī)硪黄胘query獲取自定義的標(biāo)簽屬性的值簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-09-09
firefox下jquery ajax返回object XMLDocument處理方法
使用jquery ajax處理struts2 返回json類型的時(shí)候，ajax執(zhí)行成功返回結(jié)果為object XMLDocument，解決方法如下
2014-01-01
jQuery實(shí)現(xiàn)在最后一個(gè)元素之前插入新元素的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)在最后一個(gè)元素之前插入新元素的方法,涉及jquery針對(duì)頁面元素的匹配選擇與屬性操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
jQuery學(xué)習(xí)筆記之2個(gè)小技巧
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之2個(gè)小技巧,1.jQuery功能函數(shù)前綴,2.解決window.onload函數(shù)沖突,非常不錯(cuò)，推薦給小伙伴參考下
2015-01-01
jQuery將所有被選中的checkbox某個(gè)屬性值連接成字符串的方法
這篇文章主要介紹了jQuery將所有被選中的checkbox某個(gè)屬性值連接成字符串的方法,可實(shí)現(xiàn)將選中屬性值連接成字符串的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01