JQuery动态修改select标签的内容，并绑定onchange事件，弹出选择的值

来源：互联网发布：rar文件变成网页mac 编辑：程序博客网时间：2024/05/28 19:24

http://www.2cto.com/kf/201409/337118.html

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
{
    "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
3
4
5
6
7
8
9
<option value="4">测试模板1</option>
<option value="6">测试模板2</option>
<option value="58">[录井综合图]</option>
<option value="31">[单井综合图]</option>
<option value="77">JJJJJJ</option>
<option value="76">HHHHHH</option>
<option value="72">GGGGG</option>
<option value="70">FFFFFFF</option>
<option value="124">[测井图(A3)]</option>

3.修改select的内容

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

4.绑定onchange事件

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

5.弹出选中项的值

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

6.全部代码

$(document).ready(function(){
    <pre name="code"class="javascript">       // 1.获取信息</pre> $.ajax({type:'GET',url:"/service/welllogtmpl/list?userId=1",cache:false,success:function(msg){ result = JSON.parse(msg);if(result.code == "200"){<pre class="brush:java;">                                        // 2.拼接</pre> var html = "";for(var i = 0; i < result.response.length; i++){var s = "<option value=" + result.response[i].id + ">" + result.response[i].name + "</option>";html += s;}// 3.修改option$("#logmap_tmpl").html(html);// 4.绑定onchange事件$("#logmap_tmpl").change(function(){// 5.获取选中项的值alert($(this).children('option:selected').val());});}}});}<p></p>
<pre class="brush:java;"></pre>
<br>
<br>
<p></p>
<p><br>
</p>  

0 0