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>