SM19020模拟单选下拉框。

 关键代码：

$("#val_YGMC").bind("click", function (event) { /*根据属性绑定点击事件*/
event = event || window.event;
stopBubble(event);//阻止冒泡*/
var sql = "select ID,YGMC AS NAME from sm_zdb_yg_tb where (upper(YGMC) like upper('%{0}%')";
sql = sql + " or upper(SLM) like upper('%{0}%')) and zt=1 and rownum<=10 order by YGMC";

  // if ($(this).val() == "" || $(this).val() == null) { tzdiv.hide(); return false; }
sql = sql.format('黄');

第2处：

tzdiv.find('li').remove('li');
target = $(this);
var me = this;
var tzdata = {};

第3处：var ck = $("<input/>", {

type: "checkbox",
id: id,
name: name,
checked: "checked"
}).click(function () {$(me).val(name);tzdiv.hide();});

/*基础框设置*/
var tzlist = [];/*用于缓存的数据表*/
var target;/*被点击的输入框*/
var ksrq, jsrq;
/*创建一个DIV块*/
var str_tzdiv = "<div id='tzdiv' style='background:white;z-index:999;position:absolute;border:1px solid BLACK;overflow:auto;display:none;'></div>";
$(document.body).append(str_tzdiv);

var tzdiv = $("#tzdiv");

function getDays(strDateStart, strDateEnd) {
    var strSeparator = "-"; /*日期分隔符*/
    var oDate1;
    var oDate2;
    var iDays;
    oDate1 = strDateStart.split(strSeparator);
    oDate2 = strDateEnd.split(strSeparator);
    var strDateS = new Date(oDate1[0], oDate1[1] - 1, oDate1[2]);
    var strDateE = new Date(oDate2[0], oDate2[1] - 1, oDate2[2]);
    iDays = parseInt(Math.abs(strDateS - strDateE) / 1000 / 60 / 60 / 24)
    /*把相差的毫秒数转换为天数*/
    return iDays;
}
/*根据开始日期和相隔天数计算出结束日期*/
function getNewDate(dateTemp, days) {
    var dateTemp = dateTemp.split("-");
    var nDate = new Date(dateTemp[1] + '-' + dateTemp[2] + '-' + dateTemp[0]); //转换为MM-DD-YYYY格式    
    var millSeconds = Math.abs(nDate) + (days * 24 * 60 * 60 * 1000);
    var rDate = new Date(millSeconds);
    var year = rDate.getFullYear();
    var month = rDate.getMonth() + 1;
    if (month < 10) month = "0" + month;
    var date = rDate.getDate();
    if (date < 10) date = "0" + date;
    return (year + "-" + month + "-" + date);
}
function addKQInfo(ygqc, rq, bc, lrr) {
    var sql = "insert into cjkq_tb (id,ygqc,rq,bc,lrr) values(seqcjkq.NEXTVAL,'" + ygqc + "',to_date('" + rq + "','yyyy/mm/dd'),'" + bc + "','" + lrr + "')";
    var data = writeDataAst(sql);
    if (data == 1) { alert("添加成功"); return false; }
    else alert("修改出错，请重新输入");
}

/*添加确定按钮*/
var a_qd = $("<a/>", {
    text: "[确定]",
    style: "cursor:pointer;padding-top:5px;padding-left:5px;color:blue;display:block;float:left"
});
tzdiv.append(a_qd);

/*添加取消按钮*/
var a_qx = $("<a/>", {
    text: "[取消]",
    style: "cursor:pointer;padding-top:5px;padding-left:5px;color:blue;display:block"
});
tzdiv.append(a_qx);

/*点击确定按钮*/
a_qd.click(function () {
    if (target) {
        target.val("");
        var ids = '';
        var names = '';
        tzdiv.find("input:checkbox").each(function () {
/*if($(this).is(':checked')){ */
            if ($(this).prop("checked")) {
                 ids = ids + ',' + $(this).attr('id');
                 names = names + ',' + $(this).attr('name');
             }
         });
        /*replace(/(^,)|(,$)/g, '') 去除首尾的“,”*/
        target.val(names.replace(/(^,)|(,$)/g, ''));
        if (target.attr('id').indexOf("val_") > -1) {/*卡片*/
            /*容错。页面上的是+“ID”或+“_ID”都可以*/
            var idInput = $("#" + target.attr('id') + "ID") || $("#" + target.attr('id') + "_ID");
            var ksrq = $('#val_KSRQ');
            var jsrq = $('#val_JSRQ');
            var bc = $('#val_BC').children('option:selected').val() + "";
            if (bc.indexOf("假") == -1) {
                $("#lblMsg").text("请选择请假类型");
                return false;
            }
            if (ksrq.val() == null || ksrq.val() == "") {
                $("#lblMsg").text("开始日期不能为空");
                return false;
            }
            if (jsrq.val() == null || jsrq.val() == "") {
                $("#lblMsg").text("结束日期不能为空");
                return false;
            }
            if (idInput) {
                for (var i = 0; i <= getDays(ksrq.val() + "", jsrq.val() + "") * 1; i++) {
                    addKQInfo(names.replace(/(^,)|(,$)/g, ''), getNewDate(ksrq.val() + "", i * 1), bc, _userInfo.userName + "");
                }
                document.all.btnQuery.click();
            }
        }
        tzdiv.hide();
    }
});

//点击取消按钮隐藏tzdiv*/
a_qx.click(function () {
    if (target) {
        tzdiv.hide();
    }
});

//点击其他区域隐藏tzdiv*/
$("body").click(function () {
    if (target) {
        tzdiv.hide();
    }
});
//阻止冒泡*/
function stopBubble(e) {
    if (e && e.stopPropagation)
        e.stopPropagation();
    else
        window.event.cancelBubble = true;
}
tzdiv.click(function (event) {
    event = event || window.event;
    stopBubble(event);
});


//给单元格文本框赋予点击事件*/
$(document).ready(function () {
    var col;
    $("#val_YGMC").bind("click", function (event) { /*根据属性绑定点击事件*/
        event = event || window.event;
        stopBubble(event);//阻止冒泡*/
        var sql = "select ID,YGMC AS NAME from sm_zdb_yg_tb where (upper(YGMC) like upper('%{0}%')";
        sql = sql + " or upper(SLM) like upper('%{0}%')) and zt=1 and rownum<=10 order by YGMC";
     // if ($(this).val() == "" || $(this).val() == null) { tzdiv.hide(); return false; }
        sql = sql.format('黄');
        col = $(this).parent().attr("colname") ? $(this).parent().attr("colname") : $(this).attr("id").substr(4);//判断是网格还是卡片页面后再获得col
        tzdiv.find('li').remove('li');
        target = $(this);
        var me = this;
        var tzdata = {};
        for (var i = 0; i < tzlist.length; i++) {
            if (tzlist[i] == col) {
                tzdata = tzlist[i];//根据col获取缓存的数据
                break;
            }
        }
        if (!tzdata.Rows) {//如果没有缓存就通过ajax获取*/
            var data = readDataAst(sql);
            if (data == null || data == '') {
                tzdiv.hide();
                return false;
            }

            var jdata = $.parseJSON(data);
            var tzjson = {};
            tzjson.Rows = [];
            tzjson.Rows = jdata || [];
            tzjson.col = col;
            tzlist.push(tzjson);//添加到缓存*/
            showtz(tzjson);
        } else {
            showtz(tzdata);
        }

        function showtz(tzlst) {
            var tzdivheight = 300;
            tzdiv.find('li').remove('li');/*移除原有li*/
            tzdiv.width($(me).width() + 900);

            tzdiv.height(tzdivheight);
            var pos = $(me).offset();/*输入框（target）的位置*/
            tzdiv.css("left", pos.left);

            /*判断显示框是在输入框上面还是下面*/
            var tzdivtop = ($(document.body).height() - pos.top - $(me).height()) > tzdivheight || pos.top < tzdivheight ? (pos.top + $(me).height() + 5) : (pos.top - tzdivheight - 5);

            tzdiv.css("top", tzdivtop);
var longestname = '', ismulticol = false;/*长度最长的参数、是否多列显示*/

            /*获取原ID，用于默认勾选*/
            var targetsIDval = [];
            if ($(me).attr('id').indexOf("val_") > -1) {/*卡片页面*/
                /*容错。页面上的是+“ID”或+“_ID”都可以*/
                var idInput = $("#" + $(me).attr('id') + "ID") || $("#" + $(me).attr('id') + "_ID");
            } else { }

            $.each(tzlst.Rows, function (index, item) {
                var id = item.ID;
                var name = item.NAME;

                var listyle = '';
                /*行数大于5则多列显示，通过li左浮动实现多列显示*/
                if (tzlst.Rows.length > 1) {
                    ismulticol = true;
                    listyle = "float:left;margin:1px 5px;width:" + (name.length * 1 + 1) + "em";
                    if (name.length > longestname.length)
                        longestname = name;
                }
                var li = $("<li/>", {
                    text: name,
id:name,                   
 style: "list-style-type:none;background:#87CEFA;color:black;font-size:14px;list-style-position:outside;" + listyle
                });
                var ck = $("<input/>", {
                    type: "checkbox",
                    id: id,
                    name: name,
                    checked: "checked"
                }).click(function () {$(me).val(name);tzdiv.hide(); 
                });
                /*ID不在原ID组中的，默认不勾选*/
                if ($.inArray(id, targetsIDval) == -1) {
                    ck.removeAttr("checked");
                }

                li.prepend(ck);
                tzdiv.append(li);
            });
            if (ismulticol) {/*多列显示，计算每列的宽度和列数*/
                /*tzdiv.css("left").substr(0,tzdiv.css("left").length-2),//tzdiv.offset().left,*/
                var liwidth = $("#" + longestname).width(),
                largestwidth = $(document.body).width() - pos.left,
                changablewidth = (liwidth + 10) * (tzlst.Rows.length / 3 + 1);/*分5行的时的tzdiv宽度,有多少行,决定了多少列*/
                /*tzdiv的宽度不能超出页面可显示宽度，超出时重新计算最大列数，此时行数不再是5行。20是滚动条宽度，40是tzdiv与页面最右侧预留宽度*/
                var tzdivwidth = largestwidth > changablewidth ? changablewidth + 5 : ((liwidth + 10) * Math.floor((largestwidth - 40) / (liwidth + 10)) + 20);
                tzdiv.find('li').width(liwidth);
                tzdiv.width(tzdivwidth);
            }
            tzdiv.show();
        }
    });
});