Just touch the web, wrote a drop-down list plug-in, there is a bug, ask everyone to advise

;(function($) {$.fn. Drowdoweditor=function(opts) {opts=Jquery.extend ({panel:$ ( This), Data:NULL}, opts | | {}); return  This. each (function() {         varPanelid = opts.panel[0].id; //--------drop-down container--------------        vardropdownpanelhtml = ' <div id= ' drop_down_editor_panel ' + panelid + ' style= ' border:1px solid #3471b0;  min-width:100px; Position:absolute; " ></div> ';        $ (dropdownpanelhtml). InsertAfter (Opts.panel); varDropdownpanel = $ ("#drop_down_editor_panel" +panelid); //------------------------------        //use div relative positioning to wrap textbox and drop-down containers        varcontainer = ' <div style= ' position:reletive; background-color:red, "id=" Drop_down_editor_container ' + panelid + ' "></div>";        $ (container). InsertBefore (Opts.panel); varEditorcontainer = $ ("#drop_down_editor_container" +panelid);        Opts.panel.appendTo (Editorcontainer);        Dropdownpanel.appendto (Editorcontainer); Opts.panel.css ("Float", "left"); //--------Add a drop-down button-------------        varbutton = ' <div style= ' border:solid 1px #3471b0; border-left:none;padding:4px;overflow:hidden; outline:none;width:12px; Background-image:url (.. /.. /images/arr_right_blue.png); Background-repeat:no-repeat; Background-position:center;float:left; height:15px; " ></div> ';        $ (Button). InsertAfter (Opts.panel); //---------------------------------Dropdownpanel.css ("Top", "30px"); Dropdownpanel.css ("Left", "6px");        Dropdownpanel.hide ();  for(vari = 0; i < opts.data.length; i++) {            varDataItem = ' <div class= ' drop_item ' > ' + opts.data[i].key + ' </div> ';        Dropdownpanel.append (DataItem); } dropdownpanel.find (". Drop_item"). Click (function() {alert (opts.panel[0].id); Opts.panel.val ($ ( This). HTML ());        }); $(". Drop_item:odd"). MouseEnter (function () {            $( This). CSS ("Background-color", "#3471b0");        }); $(". Drop_item:odd"). MouseLeave (function () {            $( This). CSS ("Background-color", "white");        }); $(". Drop_item:odd"). CSS ("Background-color", "white"); OPTs. Panel.Click (function(e) {e.stoppropagation (); Dropdownpanel.width (Opts.panel.width ()+ 15 + 14); Dropdownpanel.slidedown (300);        }); $ (document). Click (function() {Dropdownpanel.slideup (300);          }); Opts.panel.css ("Clear", "both");    }); }}) (JQuery);

<Div><inputtype= "text"ID= "DropDown1"class= "Dropdowneditor" /><Div>123123</Div><inputtype= "text"ID= "Dropdown"class= "Dropdowneditor" /></Div>

$ ("#dropdown"). Drowdoweditor ({data: [{"key": "Baidu", "value": "Www.baidu.com"},{"key": "Sina", "Value": "www.sina.com.cn"},{"key": " Test "," value ":" test.com "},{" key ":" Blog Park "," Value ":" Cnblog.cn "}]}); $ (" #dropdown1 "). Drowdoweditor ({data: [{"key": "Baidu 1", "Value": "Www.baidu.com"},{"key": "Sina 1", "Value": "www.sina.com.cn"},{"key" : "Test", "value": "test.com"},{"key": "Blog Park 1", "Value": "Cnblog.cn"}]});

Effect:

If only the rendering of a basic can be rendered, if it is more than the problem of coverage, just contact the web, knowledge shallow, I hope you have more guidance.

Just touch the web, wrote a drop-down list plug-in, there is a bug, ask everyone to advise