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

最新推荐文章于 2024-03-27 12:34:06 发布

weixin_43440301

最新推荐文章于 2024-03-27 12:34:06 发布

阅读量3.9k

点赞数 2

分类专栏： JavaScript jQuery Ajax 文章标签： jQuery Ajax 下拉列表

本文链接：https://blog.csdn.net/weixin_43440301/article/details/84100967

版权

jQuery 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

Ajax

2 篇文章 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>

weixin_43440301

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery动态生成下拉列表并添加点击事件【简单实用】

jQuery动态生成下拉列表并添加点击事件直接上代码了，后续会贴上效果图。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org...
复制链接

扫一扫