从表中查找并选择选项

Question

检查以下代码。在那里你会找到两张桌子。每个表<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);

        });