テーブルからオプションを見つけて選択してください

Question

以下のコードを確認してください。そこには2つのテーブルがあります。最初の各テーブル<th>には、メインカテゴリ名が含まれ、その下にすべてのサブカテゴリ名が含まれています。

メインカテゴリのテキストをクリックすると、カテゴリ選択オプションがそのカテゴリを自動的に選択し、サブカテゴリテキストをクリックするとサブカテゴリテキストがコピーされ、検索ボックスに貼り付けられます。

$(document).ready(function() { 
 
    $(".table").each(function() { 
 
    $(this).find('tr').slice(7).hide(); 
 
    }); 
 
    $(".expendbtn").html("More"); 
 
    $(document).on("click", '.expendbtn', function() { 
 
    if ($(this).text() == "More") { 
 
     $(this).prev(".table").find("tr").show(); 
 
     $(this).html("Less"); 
 
    } else { 
 
     $(this).prev(".table").find('tr').slice(7).hide(); 
 
     $(this).html("More"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="input-group"> 
 
    <input class="form-control txtSearch" id="searchString" type="text" placeholder="Search for..."> 
 
    <span class="input-group-btn"> 
 
       <button class="btn btn-default btnGo" id="searchButton" type="button">Search</button> 
 
      </span> 
 

 
    </div> 
 
    <br/> 
 

 
    <select class="form-control" id="selectMainCategory"> 
 
       <option selected="selected" value="">Select Category</option> 
 
        <option value="20081">Antiques</option> 
 
        <option value="550">Art</option> 
 
        <option value="2984">Baby</option> 
 
        <option value="267">Books</option> 
 
        <option value="12576">Business &amp; Industrial</option> 
 
        <option value="625">Cameras &amp; Photo</option> 
 
        <option value="15032">Cell Phones &amp; Accessories</option> 
 
        <option value="11450">Clothing, Shoes &amp; Accessories</option> 
 
        <option value="11116">Coins &amp; Paper Money</option> 
 
        <option value="1">Collectibles</option> 
 
        <option value="58058">Computers/Tablets &amp; Networking</option> 
 
        <option value="293">Consumer Electronics</option> 
 
        <option value="14339">Crafts</option> 
 
        <option value="237">Dolls &amp; Bears</option> 
 
        <option value="11232">DVDs &amp; Movies</option> 
 
        <option value="45100">Entertainment Memorabilia</option> 
 
        <option value="172008">Gift Cards &amp; Coupons</option> 
 
        <option value="26395">Health &amp; Beauty</option> 
 
        <option value="11700">Home &amp; Garden</option> 
 
        <option value="281">Jewelry &amp; Watches</option> 
 
        <option value="11233">Music</option> 
 
        <option value="619">Musical Instruments &amp; Gear</option> 
 
        <option value="1281">Pet Supplies</option> 
 
        <option value="870">Pottery &amp; Glass</option> 
 
        <option value="10542">Real Estate</option> 
 
        <option value="316">Specialty Services</option> 
 
        <option value="888">Sporting Goods</option> 
 
        <option value="64482">Sports Mem, Cards &amp; Fan Shop</option> 
 
        <option value="260">Stamps</option> 
 
        <option value="1305">Tickets &amp; Experiences</option> 
 
        <option value="220">Toys &amp; Hobbies</option> 
 
        <option value="3252">Travel</option> 
 
        <option value="1249">Video Games &amp; Consoles</option> 
 
        <option value="99">Everything Else</option> 
 
      </select> 
 
    <br/> 
 

 
    <div class="col-lg-3"> 
 
    <table class="table table-striped jambo_table"> 
 
     <thead> 
 
     <tr class="headings"> 
 
      <th> 
 
      <h4>Business &amp; Industrial</h4> 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>Adhesives, Sealants &amp; Tapes</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Agriculture &amp; Forestry</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Automation, Motors &amp; Drives</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Cleaning &amp; Janitorial Supplies</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Construction</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Electrical &amp; Test Equipment</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Facility Maintenance &amp; Safety</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Fasteners &amp; Hardware</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Fuel &amp; Energy</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Healthcare, Lab &amp; Life Science</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Heavy Equipment</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Heavy Equipment Attachments</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Heavy Equipment Parts &amp; Accs</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>HVAC</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Hydraulics, Pneumatics &amp; Pumps</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Light Equipment &amp; Tools</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Manufacturing &amp; Metalworking</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Material Handling</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Office</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Printing &amp; Graphic Arts</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Restaurant &amp; Catering</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Retail &amp; Services</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Websites &amp; Businesses for Sale</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Other Business &amp; Industrial</td> 
 
     </tr> 
 

 
     </tbody> 
 

 
    </table> 
 

 
    <button class="btn btn-info expendbtn" type="button">More</button> 
 
    </div> 
 

 

 
    <div class="col-lg-3"> 
 
    <table class="table table-striped jambo_table"> 
 
     <thead> 
 
     <tr class="headings"> 
 
      <th> 
 
      <h4>Cameras &amp; Photo</h4> 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>Binoculars &amp; Telescopes</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Camcorders</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Camera &amp; Photo Accessories</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Camera Drones</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Camera Drone Parts &amp; Accs</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Camera Manuals &amp; Guides</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Digital Cameras</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Digital Photo Frames</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Film Photography</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Flashes &amp; Flash Accessories</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Lenses &amp; Filters</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Lighting &amp; Studio</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Replacement Parts &amp; Tools</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Tripods &amp; Supports</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Video Production &amp; Editing</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Vintage Movie &amp; Photography</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Wholesale Lots</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Other Cameras &amp; Photo</td> 
 
     </tr> 
 

 
     </tbody> 
 

 
    </table> 
 

 
    <button class="btn btn-info expendbtn" type="button">More</button> 
 
    </div> 
 
</div>

Answer 1

このスクリプトは、ヘッダーテキストとオプションを選択し、検索文字列としてTDテキストをコピーします。

 $('th').on('click', function() { 
      var txt =$.trim($(this).text()); 
      console.log(txt); 
      $("#selectMainCategory option").each(function() { 
        if ($.trim($(this).text()) === txt) { 
         $(this).attr("selected", "selected"); 
         return; 
        } 
      }); 
     }); 

     $('td').on('click', function() { 
      var txt =$.trim($(this).text()); 
      console.log(txt); 
      $("#searchString").val(txt); 

     });