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)

<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的内容

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


4.绑定onchange事件

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


5.弹出选中项的值

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

6.全部代码

$(document).ready(function(){
	<pre name="code" class="javascript">        // 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 = "<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());});}}});}





版权声明:本文为wanglei9876原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。