最新消息:文章中包含代码时,请遵守代码高亮规范!

简单的ajax获取select下拉框数据组件【原创】

JavaScript Jonny 385浏览 1评论

最近写项目发现有很多页面的select下拉框里的option需要Ajax获取数据,但是环境又不相同,有时要页面加载后加载出来,有时在一个点击后加载出来,每个页面都写的话太麻烦,效率不高,所以自己封装了个组件,很单一,只写了关于select下拉框的数据获取。

下面是html页面的代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>selectAjax</title>
</head>
<body>
    <select id="abc"></select>
</body>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/selectAjax.js"></script>
<script type="text/javascript">
	
$(function(){
     //配置参数
        $('#abc').selectAjax({
            url: 'http://192.168.1.123',
            optionVal:'id',
            optionText:'name',
            selectedVal:'232',
            array:['data','info']
        });
})

</script>
</html>

因为第一次封装插件,所以很简单,代码也不多,在这里就直接把源码贴出来了

(function($){
    $.fn.extend({ 
        //插件名称 - selectAjax
        selectAjax: function(options) {

            //默认参数
            var defaults = {
                url:'',                       //要获取数据的url
                optionVal:'',                 //option的value值,ajax获取的json数据或数组的键名  比如{name:'Jonny'},  这里就填name
                optionText:'',                //option的text值,同上
                array:[],                     //如果数据在多维数组下,比如data=>[info=>[0=>[name=>'jonny',age=>'1'],1=>[name=>'jonny',age=>'1']]],需要填写['data','info'],最多4个
                data:{},                      //要传过去的数据,默认为空
                type:'POST',                  //ajax传送方式,默认POST
                selectedVal:'',               //当option的value为当前值时默认选中
                show_placeholder: true,       //是否显示默认第一项 true:显示,false:不显示
                placeholder:'请选择',         //默认第一项显示的值,默认为‘请选择’
                async: false,                  //ajax异步为true,同步为false,默认同步,  但需要默认选中项时,选择同步

                error: function (data) {      //请求失败时的回调函数
                
                       }
            };
            
            var options = $.extend(defaults, options);
            var item = '';
            var $this;

            function addOption() {
                if(item.length > 0){
                    if(options.show_placeholder){
                        $this.append('<option value="">'+options.placeholder+'</option>')
                    }
                    $.each(item,function (key,val) {
                        $this.append('<option value="'+val[options.optionVal]+'">'+val[options.optionText]+'</option>')
                    })
                }else{
                    $this.append('<option value="">'+options.placeholder+'</option>')
                }
            }
        
            return this.each(function() {
                var o = options;

                $this = $(this);
                $.ajax({
                    url:o.url,
                    type:o.type,
                    data:o.data,
                    async:o.async,

                    success: function (result) {
                        if(o.array.length == 0){
                            item = result

                        }else if(o.array.length == 1){
                            item = result[o.array[0]]

                        }else if(o.array.length == 2){
                            item = result[o.array[0]][o.array[1]]

                        }else if(o.array.length == 3){
                            item = result[o.array[0]][o.array[1]][o.array[2]]

                        }else if(o.array.length == 4){
                            item = result[o.array[0]][o.array[1]][o.array[2]][o.array[3]]

                        }else{
                            alert('数据请求失败');
                            return false;
                        }

                        addOption();

                    },
                    error: o.error
                });

                //默认选中事件
                $('option',$this).each(function (index) {
                    selected_val = $(this).val();
                    if(options.selectedVal == selected_val){
                        $(this).attr('selected',true);

                    }
                });
            });

        }
    });
}(jQuery));

代码很简单,有些地方写的也不好,就是为了获取select数据方便,有哪些错误和建议,可以在评论里提出来

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/22585.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Jonny的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!

网友最新评论 (1)

  1. 可进一步优化
    Terry2017-11-23 17:29