如何在JavaScript搜索功能中傳遞有效的制表符值？

Question

我當前正在創建一個搜索功能，我想基於活動選項卡在搜索URL中傳遞一個額外的參數。

到此時，我只能在每個選項卡中傳遞下拉列表的選定值，但是我不能傳遞選定的選項卡值。

PS：不要介意樣式，在我的網站上還可以。 javascript是我主要關心的問題。

到目前為止，這是我的HTML和Javascript代碼：

 $('#submit').on('click', function(search) { search.preventDefault(); var url = 'http://www.example.com/?s='; var fields = new Array("size", "color"); fields.forEach(function(f) { var v = $('#' + f).val(); if (v != '0') { url = url + f + '[' + v + ']' + ','; } }); window.location.href = url; }); 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <ul id="tabs" class="nav nav-tabs htabs"> <li class="active"> <a href="#tshirt" id="tshirt" value="TSHIRT" data-toggle="tab">T-shirts</a> </li> <li class="active"> <a href="#jacket" id="jacket" value="JACKET" data-toggle="tab">Jackets</a> </li> </ul> </div> <div class="tabs-content"> <div class="tab-pane tab-content active" id="tshirt"> <div class="row"> <div class="xs-50 sm-50 md-33"> <select id="size" class="form-control"> <option value>--Select size--</option> <option value="xl">XLarge</option> <option value="xxl">XXLarge</option> </select> </div> <div class="xs-50 sm-50 md-33"> <select id="color" class="form-control"> <option value>--Select color--</option> <option value="red">Red</option> <option value="blue">Blue</option> </select> </div> <div class="button-group btn"> <input id="submit" class="btn" name="submit" value="Search" type="submit"> </div> </div> </div> <div class="tab-pane tab-content active" id="jacket"> <div class="row"> <div class="xs-50 sm-50 md-33"> <select id="size" class="form-control"> <option value>--Select size--</option> <option value="sm">Small</option> <option value="l">Large</option> </select> </div> <div class="xs-50 sm-50 md-33"> <select id="color" class="form-control"> <option value>--Select color--</option> <option value="red">Red</option> <option value="blue">Blue</option> </select> </div> <div class="button-group btn"> <input id="submit" class="btn" name="submit" value="Search" type="submit"> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> 

Answer 1

該代碼對我有用，它是您首先發布（html）的JavaScript代碼，該代碼應該可以滿足您的需求。 這對您不起作用嗎？

<div class="row">
  <ul id="tabs" class="nav nav-tabs htabs">
    <li class="active">
      <a href="#tshirt" id="tshirt" value="TSHIRT" data-toggle="tab">T-shirts</a>
    </li>
    <li class="active">
      <a href="#jacket" id="jacket" value="JACKET" data-toggle="tab">Jackets</a>
    </li>
  </ul>
</div>


<div class="tabs-content">
  <div class="tab-pane tab-content active" id="tshirt">
    <div class="row">
      <div class="xs-50 sm-50 md-33">
        <select id="size" class="form-control">
          <option value>--Select size--</option>
          <option value="xl">XLarge</option>
          <option value="xxl">XXLarge</option>
        </select>
      </div>
       <div class="xs-50 sm-50 md-33">
        <select id="color" class="form-control">
          <option value>--Select color--</option>
          <option value="red">Red</option>
          <option value="blue">Blue</option>
        </select>
      </div>
      <div class="button-group btn">
        <input id="submit" class="btn" name="submit" value="Search" type="submit" onclick="myclick()">
      </div>
    </div>
  </div>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<script>
    function myclick() {
      var url = window.location.href ;
      var hash = url.substring(url.indexOf("#")+1);
      var mysize = document.getElementById("size").value;
      var mycolor = document.getElementById("color").value;

      window.location.href = "http://www.test.com/?tab=" + hash + "&Size=" + mysize + "&mycolor=" + mycolor;
  }
</script>

更新后的版本

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <ul id="tabs" class="nav nav-tabs htabs">
      <li>
          <button type="button" class="btn btn-link" onclick="mytype('TSHIRT')">T-shirts</button>
      </li>
      <li>
          <button type="button" class="btn btn-link" onclick="mytype('JACKET')">Jackets</button>
      </li>
    </ul>
  </div>


  <div class="tabs-content">
    <div class="tab-pane tab-content" id="tshirt" style="display:none">
      <div class="row">
        <div class="xs-50 sm-50 md-33">
          <select id="tshirtsize" class="form-control">
            <option value>--Select size--</option>
            <option value="xl">XLarge</option>
            <option value="xxl">XXLarge</option>
          </select>
        </div>
        <div class="xs-50 sm-50 md-33">
          <select id="tshirtcolor" class="form-control">
            <option value>--Select color--</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
          </select>
        </div>
        <div class="button-group btn">
          <input id="submit" class="btn" name="submit" value="Search" type="submit" onclick="myclick('tshirt')">
        </div>
      </div>
    </div>
    <div class="tab-pane tab-content" id="jacket" style="display:none">
      <div class="row">
        <div class="xs-50 sm-50 md-33">
          <select id="jacketsize" class="form-control">
            <option value>--Select size--</option>
            <option value="sm">Small</option>
            <option value="l">Large</option>
          </select>
        </div>
        <div class="xs-50 sm-50 md-33">
          <select id="jacketcolor" class="form-control">
            <option value>--Select color--</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
          </select>
        </div>
        <div class="button-group btn">
          <input id="submit" class="btn" name="submit" value="Search" type="submit" onclick="myclick('jacket')">
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<script>
  var passtype;

  function mytype(mytype) {
      switch (mytype) {
        case "TSHIRT":
            passtype = "TSHIRT";
            document.getElementById("tshirt").style.display = "block";
            document.getElementById("jacket").style.display = "none";
            break;
        case "JACKET":
            passtype = "JACKET";
            document.getElementById("jacket").style.display = "block";
            document.getElementById("tshirt").style.display = "none";
    }
  }

  function myclick(mytype) {

    var url = window.location.href ;
    var mysize = document.getElementById(mytype + "size").value;
    var mycolor = document.getElementById(mytype + "color").value;
    window.location.href = "results&searchfilter=category['" + mytype + "'],size['"+ mysize +"'],color['"+ mycolor +"']";

}
</script>