项目总结09：select标签下封装option标签

　　项目中经常用到Select标签，用封装好的方法获取option，可以避免冗赘的代码；

 

1.JSP--标签

<select class="width_md" name="queryProjectSupType" id="queryProjectSupType" title="项目类型-大类"></select>

2.JS1--实例化option

<script type="text/javascript">
    $().ready(function(){
        SELECT_LIST.getProjectSupType("queryProjectSupType", "${pd.queryProjectSupType}");
　　　　})
</script>

3.JS2--数据封装

var SELECT_LIST = {
        getProjectSupType: function(targetId,selectValue){
        var url = 'dictionary/list/condition';
        var dicType = {};
        dicType.url = url;//ajax的url
        dicType.targetId = targetId;//即将实例化的select标签的id
        dicType.keyValue = "dicName";//从数据库获取的Json数据，将key为"dicName"的value赋值给option的value属性
        dicType.keyName = "dicName";//从数据库获取的Json数据，将key为"dicName"的value赋值给option的text属性
        dicType.condition = {codeId:8};//这是从传给数据库的数据筛选条件，因需求而异
        dicType.firstOption = "<option value=''>请选择分类</option>";//默认的第一个option标签的text属性
        dicType.selectedValue = selectValue;//标签实例化后，value等于selectValue的option，将默认选中
        ajaxGenerateSelect(dicType);//ajax获取数据，生成option数据
    }    
}

3.JS3--1.ajax获取数据，2.js生成option标签，并放入Select标签

function ajaxGenerateSelect(selectObject){
    var url = selectObject.url;
    var method = selectObject.method ? selectObject.method : "POST";
    var keyValue = selectObject.keyValue ? selectObject.keyValue : "id";
    var keyName = selectObject.keyName ? selectObject.keyName : "name";
    var selectedValue = selectObject.selectedValue ? selectObject.selectedValue : null;
    var targetId = selectObject.targetId;
    var condition = selectObject.condition ? selectObject.condition : {};
    var afterHandle = selectObject.afterHandle;
    var formatter = selectObject.formatter;
    var firstOption = selectObject.firstOption;
    var ajaxObject = {};
    ajaxObject.url = url;
    ajaxObject.method = method;
    ajaxObject.data = JSON.stringify(condition);
    ajaxObject.success = function(result){
        var data = result.data;
        var html = "";
        if(firstOption){
            html = firstOption;
        }
        for(var i=0;i<data.length;i++){
            var selected = "";
            var dataItem = data[i];
            if(selectedValue == dataItem[keyValue]){
                selected = "selected";
            }
             var option = "<option value='#(value)' #(selected)>#(name)</option>";
             var nameValue = dataItem[keyName];
             if(formatter){
                 nameValue = formatter(dataItem);
             }
             option = option.replace("#(value)", dataItem[keyValue]).
             replace("#(name)",nameValue).replace("#(selected)", selected);
             html += option;
        }
        $("#" + targetId).html('').append(html);
        if(afterHandle){
            afterHandle();
        }
    };
    
    ajaxMethod(ajaxObject);
}