ajax的下拉列表输入框

Question

1. $(function(){
2. $(".ajaxselect").ajaxselect({valuefrom:'#p1,#p2,#p3', valueto:"#selOneHidden",url:'json.jsp',data:'&p1={0}&p2={1}&p3={2}&kyname=',selectoption:'#showSelectOption'});
3. });
4. html代码
6. <%--showselectoption 是共用的--%>
7. <div id="showSelectOption" class="showSelectOption" valueto="selOneHidden">
8. <div>
9. <ul></ul>
10. </div>
11. <span class="selectdivclose" title="关闭"> </span>
12. </div>
13. <input type="text" id="p1" name="" value="p1">
14. <input type="text" id="p2" name="" value="p2">
15. <input type="text" id="p3" name="" value="p3">
16. <input type="text" id="selOneHidden" name="">
17. <input type="text" id="selOne" name="tt" class="ajaxselect">

复制代码[代码] 用到的样式

1. .ajaxselect{background: url("../images/select.png") right bottom no-repeat;}
2. .selectdivclose{background: url("../images/cancel.png") no-repeat;float:right;width:16px;height:16px;cursor:pointer;margin:5px;}
3. .showSelectOption{border:1px #eee solid;width:200px;padding:0px;position:fixed;z-index:99999;display:none;background-color:#fff;}
4. .showSelectOption ul{list-style:none;margin:0px;padding:0px;}
5. .showSelectOption li{padding:5px;list-style:none;text-align:left;}
6. .showSelectOption .over{background-color:#eee;}
7. .showSelectOption .out{background-color:#fff;}

复制代码[代码] 写的插件代码

1. jQuery.fn.extend({
2.         //opt={valuefrom:'外部传递过来的值DOM的id',callback:选择下拉框后的调用方法,url:'ajax加载url'} url是必须有的
3.         //针对多值传递过来可以使用这样的方式valuefrom:'#id1,#id2,#id3',url:'xx.do?s={0}&b={1}&c={2}&传递输入框的值paramname=#key' key为 输入框的值s
4.         ajaxselect:function(opt){
5.                 var option={valuefrom:'',valueto:'',url:'',data:'',selectoption:''}//valuefrom:接收某些值的对象id valueto:选中后值接收对象 data:url后面接的参数如data:'&p1={0}&p2={1}&p3={2}&keyname='
6.                         option=opt;
7.                
8.                 var $ajaxselect=$(this);
9.                 var $selectDiv=$(option.selectoption);
10.                 $selectDiv.css({top:($ajaxselect.offset().top+$ajaxselect.height()+4)+"px",left:$ajaxselect.offset().left+"px"});
11.                 $(".selectdivclose").click(function(){$selectDiv.hide();});
12.                
13.                 $ajaxselect.change(
14.                 function (){
15.                         $selectDiv.show();
16.                 //        $selectDiv.find("li").remove();
17.                         var $this=$(this);
18.                         var valueto=$selectDiv.attr("valueto");
19.                         if($this.val()==""){
20.                                 $selectDiv.find("li").remove();
21.                                 $selectDiv.hide();
22.                                 }else{
23.                                         $selectDiv.show();
24.                                 }
25.                         var $ul=$selectDiv.find("ul");
26.                         var datastr="";
27.                         //构建ajax传递的url及参数值
28.                         if(option.valuefrom!=""){
29.                         var valuefrom=option.valuefrom;
30.                         var paramestr=new Array();
31.                         var vas=valuefrom.split(",");
32.                         $.each(vas,function(i,v){
33.                                 paramestr.push($(v).val());
34.                                 });
35.                         //格式化数据到ajaxurl中
36.                         datastr=option.data.format1(paramestr)+$this.val();
37.                         }else{
38.                                 datastr=option.data+$this.val();
39.                         }
40.                         $.ajax({url:option.url,data:datastr,dataType:'json',type:'POST',success:function(data){
41.                                 $ul.empty();
42.                                 //装载数据
43.                                 $.each(data,function(i,d){
44.                                         $ul.append("<li valueto='"+valueto+"' val='"+d.id+"'>"+d.name+"</li>");
45.                                 });       
46.                         },error:function(e){},cache:false,complete:function(){
47.                                 var $valuetoli=$selectDiv.find("li[valueto]");
48.                                 $valuetoli.click(function(){
49.                                         var $this=$(this);
50.                                         var $sto=$("#"+$this.attr("valueto"));
51.                                         $sto.val($this.attr("val"));
52.                                         $ajaxselect.val($this.text());
53.                                         $selectDiv.hide();
54.                                 });
55.                                 $valuetoli.hover(function(){
56.                                         $(this).removeClass("out").addClass("over");
57.                                         },function(){
58.                                                 $(this).removeClass("over").addClass("out");
59.                                         });}
60.                         });               
61.                 }
62.                 );
63.                 $ajaxselect.keyup(function(){$ajaxselect.change();});
64.         //        $ajaxselect.focus(function(){$ajaxselect.change();});
65.         }
66. });

复制代码