jquery select2 数据基本查询！ 

 1 <!-- 加载 Jquery -->
 2     <script src="../../js/jquery-1.12.4.min.js"></script>
 3 
 4     <!-- 加载 Select2 -->
 5     <link href="../../css/select2/select2.min.css" rel="stylesheet" />
 6     <script src="../../js/select2/select2.min.js"></script>
 7 
 8 <select id="rimsName" class="country w-20" data-placeholder="All">
 9                             <option value="0">All</option>
10                             <option value="1">AR36 Disc</option>  
11                             <option value="2">AR36 Grooved Graphene Surface</option>
12                             <option value="3">333333</option>
13                             <option value="4">223333</option>
14                             <option value="5">444444</option>
15                         </select>
16 
17 <div>
18     <table id="table-data" class="table table-bordered">
19                             <thead class="bg-f1f1f1">
20                                 <tr class="text-center text-first" style="white-space: nowrap;">
21                                     <th>Item No</th>
22                                     <th>Model</th>
23                                     <th>Hole</th>
24                                     <th>Look</th>
25                                     <th>Access Holes</th>
26                                     <th>Drain Holes</th>
27                                     <th>Nipple Type</th>
28                                     <th>Bead Type</th>
29                                     <th>Weight</th>
30                                     <th>Qty</th>
31                                     <th>Price</th>
32                                 </tr>
33                             </thead>
34                             <tbody>
35                                 <tr class="table-center text-center line-tr">
36                                     <td>1</td>
37                                     <td><a href="#">AR36 Disc</a></td>
38                                     <td>28H</td>
39                                     <td>Matte 3K</td>
40                                     <td>With</td>
41                                     <td>Without</td>
42                                     <td>External</td>
43                                     <td>Hookless</td>
44                                     <td>444g</td>
45                                     <td>1</td>
46                                     <td>
47                                         <p class="mb-0">$85.00</p>
48                                         <p class="my-1 font-14 color-999">Reg $170.00</p>
49                                         <button type="button" class="btn btn-primary btn-sm" onclick="addCart(this)">Add to Cart</button>
50                                     </td>
51                                 </tr>
52                                 <tr class="table-center text-center line-tr">
53                                     <td>2</td>
54                                     <td><a href="#">AR36 </a>Grooved Graphene Surface</td>
55                                     <td>20H</td>
56                                     <td>Matte UD</td>
57                                     <td>With</td>
58                                     <td>Without</td>
59                                     <td>Internal</td>
60                                     <td>Hooked</td>
61                                     <td>439g</td>
62                                     <td>1</td>
63                                     <td>
64                                         <p class="mb-0">$94.53</p>
65                                         <p class="my-1 font-14 color-999">Reg $189.05</p>
66                                         <button type="button" class="btn btn-primary btn-sm" onclick="addCart(this)">Add to Cart</button>
67                                     </td>
68                                 </tr>
69                             </tbody>
70                         </table>
71 </div>
72 
73 <script>
74     $(function(){
75         $("#rimsName").select2();
76 
77         $("#rimsName").change(function () {
78             console.log($("#rimsName").select2('data')[0].text, typeof $("#rimsName").select2('data')[0].text);
79             console.log($("#rimsName").select2('val'));
80             var datas = $("#rimsName").select2('data')[0].text;
81             var dataVal = $("#rimsName").select2('val');
82             if(dataVal > 0){
83                 $("#table-data>tbody>tr").hide()
84                     .filter(":contains('" + (datas) + "')")
85                     .show();
86             }else{
87                 $("#table-data>tbody>tr").show();
88             }
89         })
90     })
91 
92 </script>

 

posted @ 2022-04-07 11:41  芳香四溢713051  阅读(285)  评论(0)    收藏  举报