jQuery动态生成下拉列表并添加点击事件【简单实用】

ゝ一世哀愁。 2022-04-15 21:26 523阅读 0赞

## jQuery动态生成下拉列表并添加点击事件 ##

直接上代码了，后续会贴上效果图。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
    <ul id="list">
    </ul>
    <div class="form-group">
        <button  id="L1"  class="col-sm-2">部门</button>
        <div class="col-sm-8">
            <select name="deptId" id="deptId" class="form-control">
                <option value="">请选择部门</option>
            </select>
        </div>
    </div>
    <input type="text" name="phone" id="phone" />
    <script type="text/javascript" src="/static/static/js/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url: '/member/list',
                type: 'POST',
                data: {},
                dataType: 'json',
                timeout: 1000,
                cache: false,
                beforeSend: LoadFunction, //加载执行方法
                error: erryFunction,  //错误执行方法
                success: succFunction //成功执行方法
            });
            function LoadFunction() {
                $("#list").html('加载中...');
            }
            function erryFunction() {
                alert("error");
            }
            function succFunction(tt) {
                $("#list").html('');
    
                //eval将字符串转成对象数组          
                var json = eval(tt); //数组
               
                var deptId = $('#deptId');
                $.each(json,function(index,item){
                    htmlStr = '';
                    htmlStr += '<option  value="' + item.username + '">' + item.id + '</option>';
                    deptId.append(htmlStr);
                });
            }
            $("#deptId").change(function(){
                alert($(this).children('option:selected').val());
            });
            
        });
    </script>
    </body>
    </html>