js 可编辑下拉列表 已测试

将代码粘入，只需要修改targetObj和targetVal并添加下拉图标即可

targetObj中保存要能够实现下拉的input（text类型）的id，argetVal保存对应的下拉选项

样式可能在不同的input长度下，不同浏览器下不太一样，需微调

 

var targetObj = ['eddc_a','eddc_b'];//想要实现可编辑下拉框的元素id
 var targetVal = [['a1','a2','a3','a4'],['b1','b2','b3']];//可编辑下拉框元素的选项
 //可编辑下拉框监听事件，点击非可编辑下拉框时，关闭下拉框
 document.body.onclick = function(e){
   e = e || window.event;
   var target = e.target || e.srcElement;
   if(target.id != 'selOptionTd_zq'&&target.id != 'editSelImg_zq'){
    $("div[id$=_div_zq]").each(function(){
     if($(this).css("display")!='none'){
      $(this).toggle();
     }
    });
   }
 }
 $(function(){
        for(var i = 0 ; i < targetObj.length ; i++){
            var inputHeight = $("#"+targetObj[i]).css("height");//获取被追加元素的高度
            $("#"+targetObj[i]).css("border","none");
            var inputWidth = $("#"+targetObj[i]).css("width");//获取被追加元素的宽度
            var selPicWidth = '18';
            var divWidth = inputWidth.substring(0,inputWidth.length-2)*1+selPicWidth*1;
            var wrapHtml = '<div style="width:146px;float:left;margin-top:10px;border:1px solid #E3E9EF;">';//input外包裹一层div元素
            wrapHtml+='</div>';
            var appendSelHtml = '<div οnclick="javascript:editableSelDiv(&quot;'+targetObj[i]+'&quot;);" style="float:left;width:'+selPicWidth+'px;height:16px;border-left:none;">';//input后追加下拉箭头
                appendSelHtml += '<img style="float:left;margin-left:4px;" id="editSelImg_zq" src="<%=basePath%>view/images/customize/select.gif" width="'+selPicWidth+'" height="16" />';
            appendSelHtml += '</div>';
            $("#"+targetObj[i]).wrap(wrapHtml);
            $("#"+targetObj[i]).css("float","left");
            var appendOptionHtml = '<div id='+targetObj[i]+'_div_zq style="display:none;position:absolute;width:'+divWidth+';height:30px;margin-top:'+inputHeight+'">';//input箭头后追加下拉选项层
                 appendOptionHtml += '<table style="background-color:white;border:1px solid #817F82;width:'+inputWidth+';">';
             for(var j = 0 ; j < targetVal[i].length ; j++){
                 appendOptionHtml += '<tr οnmοuseοver="javascript:changeInColor(this);" onmouseout ="javascript:changeOutColor(this);">';
                    appendOptionHtml += '<td style="border:none;" name="selOptionName_zq" id="selOptionTd_zq" οnclick="setSelectOptionValue(this,&quot;'+targetObj[i]+'&quot;,&quot;'+targetObj[i]+'&quot;)">';
                        appendOptionHtml += targetVal[i][j];
                    appendOptionHtml += '</td>';
                appendOptionHtml += '</tr>';
            }    
                appendOptionHtml += '</table>';
            appendOptionHtml += '</div>';
            $("#editSelImg_zq").css("float","left");
            $("#"+targetObj[i]).after(appendOptionHtml);
            $("#"+targetObj[i]).after(appendSelHtml);
        }
    });
 //选值后赋值和隐藏
 function setSelectOptionValue(e,insertObjName,targetObjName){
  $("#"+insertObjName).val($(e).html());
  $("#"+targetObjName+"_div_zq").hide();
 }
 //移出变色
 function changeOutColor(e){
  $(e).css("background-color","white");
 }
 //经过变色
 function changeInColor(e){
  $(e).css("background-color","#EBEBEB");
 }
 //可编辑下拉列表
 function editableSelDiv(eName){
  $("#"+eName+"_div_zq").toggle();
 }

欢迎加入我的QQ交流群425783133