900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html下拉框onchange事件 JQuery动态修改select标签的内容 并绑定onchange事件 弹出选择的值...

html下拉框onchange事件 JQuery动态修改select标签的内容 并绑定onchange事件 弹出选择的值...

时间:2023-06-26 13:27:38

相关推荐

html下拉框onchange事件 JQuery动态修改select标签的内容 并绑定onchange事件 弹出选择的值...

1.获取信息,获取JSON格式的返回信息

{

"response": [

{

"name": "测试模板1",

"id": 4,

"type": 0

},

{

"name": "测试模板2",

"id": 6,

"type": 0

},

{

"name": "[录井综合图]",

"id": 58,

"type": 1

},

{

"name": "[单井综合图]",

"id": 31,

"type": 6

},

{

"name": "JJJJJJ",

"id": 77,

"type": 0

},

{

"name": "HHHHHH",

"id": 76,

"type": 0

},

{

"name": "GGGGG",

"id": 72,

"type": 0

},

{

"name": "FFFFFFF",

"id": 70,

"type": 0

},

{

"name": "[测井图(A3)]",

"id": 124,

"type": 3

}

],

"desc": "200",

"code": "200"

}

2.拼接字符串(option的value值是id)

测试模板1

测试模板2

[录井综合图]

[单井综合图]

JJJJJJ

HHHHHH

GGGGG

FFFFFFF

[测井图(A3)]

3.修改select的内容

$("#logmap_tmpl").html(html);

4.绑定onchange事件

$("#logmap_tmpl").change(function(){

5.弹出选中项的值

alert($(this).children('option:selected').val());

6.全部代码

$(document).ready(function(){

// 1.获取信息 $.ajax({type:'GET',url:"/service/welllogtmpl/list?userId=1",cache:false,success:function(msg){ result = JSON.parse(msg);if(result.code == "200"){

// 2.拼接 var html = "";for(var i = 0; i < result.response.length; i++){var s = "" + result.response[i].name + "";html += s;}// 3.修改option$("#logmap_tmpl").html(html);// 4.绑定onchange事件$("#logmap_tmpl").change(function(){// 5.获取选中项的值alert($(this).children('option:selected').val());});}}});}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。