"点击input输入框弹出选择层"的实现

需求为在一个Repeat中的text增加提示选项，可以直接输入，也可以点击选项给textBox赋值。而且是2个不同的text需要2个不同的提示选项。

首先在网上找，我找到了一个大概可用的控件，网址如下:

http://www.51xuediannao.com/js/jquery/jquery_input_tanchu/popDiv.html

改造之后的代码如下:

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2 
  3 <!DOCTYPE html>
  4 
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head runat="server">
  7     <title>Test</title>
  8     <style type="text/css">
  9         body {
 10             font-size: 12px;
 11         }
 12 
 13         .selectItemcont {
 14             padding: 8px;
 15         }
 16 
 17         #selectUnit {
 18             background: #FFF;
 19             position: absolute;
 20             top: 0px;
 21             left: center;
 22             border: 1px solid #000;
 23             overflow: hidden;
 24             width: 240px;
 25             z-index: 1000;
 26         }
 27 
 28         #selectCountry {
 29             background: #FFF;
 30             position: absolute;
 31             top: 0px;
 32             left: center;
 33             border: 1px solid #000;
 34             overflow: hidden;
 35             width: 240px;
 36             z-index: 1000;
 37         }
 38 
 39         .selectItemtit {
 40             line-height: 20px;
 41             height: 20px;
 42             margin: 1px;
 43             padding-left: 12px;
 44         }
 45 
 46         .bgc_ccc {
 47             background: #E88E22;
 48         }
 49 
 50         .selectItemleft {
 51             float: left;
 52             margin: 0px;
 53             padding: 0px;
 54             font-size: 12px;
 55             font-weight: bold;
 56             color: #fff;
 57         }
 58 
 59         .selectItemright {
 60             float: right;
 61             cursor: pointer;
 62             color: #fff;
 63         }
 64 
 65         .selectItemcls {
 66             clear: both;
 67             font-size: 0px;
 68             height: 0px;
 69             overflow: hidden;
 70         }
 71 
 72         .selectItemhidden {
 73             display: none;
 74         }
 75     </style>
 76     <script src="JS/jquery-1.3.1.js"></script>
 77     <script src="JS/jquery.bgiframe.js"></script>
 78 </head>
 79 <body>
 80     <form id="form1" runat="server">
 81         <div>
 82             <table>
 83                 <tr>
 84                     <th>Unit</th>
 85                     <th>Country</th>
 86                 </tr>
 87                 <asp:Repeater ID="rptData" runat="server">
 88                     <ItemTemplate>
 89                         <tr>
 90                             <td>
 91                                 <input type="text" value='<%#Eval("Unit")%>' id="txtUnit" name="txtUnit"/>
 92                             </td>
 93                             <td>
 94                                 <input type="text" value='<%#Eval("Country")%>' id="txtCountry" name="txtCountry"/>
 95                             </td>
 96                         </tr>
 97                     </ItemTemplate>
 98                 </asp:Repeater>
 99             </table>
100         </div>
101         <div id="selectUnit" class="selectItemhidden">
102             <div id="selectItemAd" class="selectItemtit bgc_ccc">
103                 <h2 id="selectItemTitle" class="selectItemleft">请选择单位</h2>
104                 <div id="selectItemClose" class="selectItemright">关闭</div>
105             </div>
106             <div id="selectItemCount" class="selectItemcont">
107                 <div id="selectSub">
108                     <input type="checkbox" name="cr01" id="cr01" value="KG" /><label for="cr01">千克</label>
109                     <input type="checkbox" name="cr02" id="cr02" value="PCS" /><label for="cr02">个</label>
110                     <input type="checkbox" name="cr03" id="cr03" value="KM" /><label for="cr03">千米</label>
111                 </div>
112             </div>
113         </div>
114         <div id="selectCountry" class="selectItemhidden">
115             <div id="selectItemAd" class="selectItemtit bgc_ccc">
116                 <h2 id="selectItemTitle" class="selectItemleft">请选择国家地区</h2>
117                 <div id="selectItemClose" class="selectItemright">关闭</div>
118             </div>
119             <div id="selectItemCount" class="selectItemcont">
120                 <div id="selectSub">
121                     <input type="checkbox" name="cr04" id="cr04" value="CN" /><label for="cr04">中国</label>
122                     <input type="checkbox" name="cr05" id="cr05" value="HK" /><label for="cr05">香港</label>
123                     <input type="checkbox" name="cr06" id="cr06" value="DE" /><label for="cr06">德国</label>
124                     <input type="checkbox" name="cr07" id="cr07" value="US" /><label for="cr07">美国</label>
125                 </div>
126             </div>
127         </div>
128     </form>
129 </body>
130 <script type="text/javascript">
131     jQuery.fn.selectCity = function (targetId) {
132         var _seft = this;
133         var targetId = $(targetId);
134 
135         this.click(function () {
136             var A_top = $(this).offset().top + $(this).outerHeight(true);  //  1
137             var A_left = $(this).offset().left;
138             targetId.bgiframe();
139             targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" });
140         });
141 
142         targetId.find("#selectItemClose").click(function () {
143             targetId.hide();
144         });
145 
146         targetId.find("#selectSub :checkbox").click(function () {
147             targetId.find(":checkbox").attr("checked", false);
148             $(this).attr("checked", true);
149             _seft.val($(this).val());
150             targetId.hide();
151         });
152 
153         $(document).click(function (event) {
154             if (event.target.id != _seft.selector.substring(1)) {
155                 targetId.hide();
156             }
157         });
158 
159         targetId.click(function (e) {
160             e.stopPropagation(); //  2
161         });
162 
163         return this;
164     }
165 
166     $(function () {
167         //test1:
168         $("#txtUnit").selectCity("#selectUnit");
169         //test2：
170         $("#txtCountry").selectCity("#selectCountry");
171     });
172 </script>
173 </html>

View Code

我在使用过程中发现问题:1)repeat里面的第二行不能显示提示 2)输入值和提示选项没有互相赋值(直接修改输入框的值，弹出的提示没有改变) 3)使用checkBox不太专业，这个应该是radio ,4)User提出，如果text中有人工输入，提示就需要自动消失

2）3）4)都很容易解决，1)花费了一些时间，最后终于解决了，也解决了原来的作者的两个一样的提示选项，需要两个不同的DIV的问题。

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2 
  3 <!DOCTYPE html>
  4 
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head runat="server">
  7     <title>Test</title>
  8     <style type="text/css">
  9         body {
 10             font-size: 12px;
 11         }
 12 
 13         .selectItemcont {
 14             padding: 8px;
 15         }
 16 
 17         #selectUnit {
 18             background: #FFF;
 19             position: absolute;
 20             top: 0px;
 21             left: center;
 22             border: 1px solid #000;
 23             overflow: hidden;
 24             width: 240px;
 25             z-index: 1000;
 26         }
 27 
 28         #selectCountry {
 29             background: #FFF;
 30             position: absolute;
 31             top: 0px;
 32             left: center;
 33             border: 1px solid #000;
 34             overflow: hidden;
 35             width: 240px;
 36             z-index: 1000;
 37         }
 38 
 39         .selectItemtit {
 40             line-height: 20px;
 41             height: 20px;
 42             margin: 1px;
 43             padding-left: 12px;
 44         }
 45 
 46         .bgc_ccc {
 47             background: #E88E22;
 48         }
 49 
 50         .selectItemleft {
 51             float: left;
 52             margin: 0px;
 53             padding: 0px;
 54             font-size: 12px;
 55             font-weight: bold;
 56             color: #fff;
 57         }
 58 
 59         .selectItemright {
 60             float: right;
 61             cursor: pointer;
 62             color: #fff;
 63         }
 64 
 65         .selectItemcls {
 66             clear: both;
 67             font-size: 0px;
 68             height: 0px;
 69             overflow: hidden;
 70         }
 71 
 72         .selectItemhidden {
 73             display: none;
 74         }
 75     </style>
 76     <script src="JS/jquery-1.3.1.js"></script>
 77     <script src="JS/jquery.bgiframe.js"></script>
 78 </head>
 79 <body>
 80     <form id="form1" runat="server">
 81         <div>
 82             <table>
 83                 <tr>
 84                     <th>Unit</th>
 85                     <th>Country</th>
 86                 </tr>
 87                 <asp:Repeater ID="rptData" runat="server">
 88                     <ItemTemplate>
 89                         <tr>
 90                             <td>
 91                                 <input type="text" value='<%#Eval("Unit")%>' id="txtUnit" name="txtUnit" />
 92                             </td>
 93                             <td>
 94                                 <input type="text" value='<%#Eval("Country")%>' id="txtCountry" name="txtCountry" />
 95                             </td>
 96                         </tr>
 97                     </ItemTemplate>
 98                 </asp:Repeater>
 99             </table>
100         </div>
101         <div id="selectUnit" class="selectItemhidden">
102             <div id="selectItemAd" class="selectItemtit bgc_ccc">
103                 <h2 id="selectItemTitle" class="selectItemleft">请选择单位</h2>
104                 <div id="selectItemClose" class="selectItemright">关闭</div>
105             </div>
106             <div id="selectItemCount" class="selectItemcont">
107                 <div id="selectSub">
108                     <input type="radio" name="cr01" id="cr01" value="KG" /><label for="cr01">千克</label>
109                     <input type="radio" name="cr02" id="cr02" value="PCS" /><label for="cr02">个</label>
110                     <input type="radio" name="cr03" id="cr03" value="KM" /><label for="cr03">千米</label>
111                 </div>
112             </div>
113         </div>
114         <div id="selectCountry" class="selectItemhidden">
115             <div id="selectItemAd" class="selectItemtit bgc_ccc">
116                 <h2 id="selectItemTitle" class="selectItemleft">请选择国家地区</h2>
117                 <div id="selectItemClose" class="selectItemright">关闭</div>
118             </div>
119             <div id="selectItemCount" class="selectItemcont">
120                 <div id="selectSub">
121                     <input type="radio" name="cr04" id="cr04" value="CN" /><label for="cr04">中国</label>
122                     <input type="radio" name="cr05" id="cr05" value="HK" /><label for="cr05">香港</label>
123                     <input type="radio" name="cr06" id="cr06" value="DE" /><label for="cr06">德国</label>
124                     <input type="radio" name="cr07" id="cr07" value="US" /><label for="cr07">美国</label>
125                 </div>
126             </div>
127         </div>
128     </form>
129 </body>
130 <script type="text/javascript">
131     jQuery.fn.selectCity = function (targetId) {
132         var _seft = this;
133         var targetId = $(targetId);
134 
135         targetId.click(function (e) {
136             e.stopPropagation(); //  2
137         });
138 
139         return this.each(function () {
140             var $this = $(this);
141             $this.click(function () {
142                 $(".selectItemhidden").hide();
143                 var A_top = $(this).offset().top + $(this).outerHeight(true);  //  1
144                 var A_left = $(this).offset().left;
145                 targetId.bgiframe();
146                 targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" });
147 
148                 targetId.find(":radio").attr("checked", false);
149                 targetId.find(":radio").each(function () {
150                     if ($(this).val() == $this.val()) {
151                         $(this).attr("checked", true);
152                     }
153                 });
154                 
155                 targetId.find("#selectItemClose").click(function () {
156                     targetId.hide();
157                 });
158                
159                 targetId.find("#selectSub :radio").unbind();
160                 targetId.find("#selectSub :radio").click(function () {
161                     targetId.find(":radio").attr("checked", false);
162                     $(this).attr("checked", true);
163                     $this.val($(this).val());
164                     targetId.hide();
165                 });
166 
167                 $(document).unbind('click');
168                 $(document).click(function (event) {
169                     if (event.target.id != $this.attr("id")) {
170                         targetId.hide();
171                     }
172                 });
173             })
174             $this.keydown(function () { $(".selectItemhidden").hide(); });
175         });  
176     }
177 
178     $(function () {
179         //test1:
180         $("input[name='txtUnit']").selectCity("#selectUnit");
181         //test2：
182         $("input[name='txtCountry']").selectCity("#selectCountry");
183     });
184 </script>
185 </html>

View Code

这个还有代完善的地方:

1)radio也不是很专业，如果碰到项次内容长短不齐，项次很多，会变成乱七八糟的，而我在实际使用的时候，我用到了<br/>来换行，但是点击非文字的部分不会选中，只能使用空格填充，中英文夹杂在一起的时候进行空格补齐那是件不可能完成的任务。最好还是需要修改为<li>

2)在JS代码中使用了$(".selectItemhidden")来选择所有的选项DIV，不是很合适