在移动设备屏幕上重新对齐多个选择选项

时间：2020-11-10 22:03:48

标签： javascript css

我有4个选择选项设置为width: 21%;

这在台式机上效果很好，因为它们都是水平对齐的，但在移动设备上会保持不变，因为SELECT的大小会减小，保持水平对齐，并且您无法在其中显示文字。

如何使选择选项在台式机上水平对齐，在较小的屏幕上垂直对齐（一个又一个）？

我可以将width: 21%;更改为width: 260px;，但是有更好的方法吗？

function filter() {
  var filter_num_package = document.getElementById("myInput").value.toUpperCase().trim();
  var filter_num_nights = document.getElementById("myInput1").value.toUpperCase().trim();

  var filter_num_people = document.getElementById("myInput2").value.toUpperCase().trim();
  //loop through tr
  $(" tbody tr").each(function() {
    //get td value 0,1,2
    var first_td = $(this).find("td:eq(0)").text().toUpperCase().trim()
    var second_td = $(this).find("td:eq(1)").text().toUpperCase().trim()
    var third_td = $(this).find("td:eq(2)").text().toUpperCase().trim()

    //check if value matches
    if (first_td.includes(filter_num_package) &&
      second_td.includes(filter_num_nights) &&
      third_td.includes(filter_num_people)) {
      //display that row
      $(this).css("display", "");
    } else {
      //hide that row
      $(this).css("display", "none");
    }
  })
}

function filter1() {
  //get value of last select
  var values = document.getElementById("myInput3").value.toUpperCase().trim();
  //check if value is not both or first option
  if (values != "BOTH" && values != "") {
    //hide all td which are greater then 4
    $("tr").find("td:gt(4)").hide()
    //loop through second tr > th
    $("table tr:eq(1) th ").each(function() {
      //check if the text is equal to selct value
      if ($(this).text().toUpperCase().trim() === values) {
        //show that th
        $(this).show();
        //get class 21,22..etc
        var class_to_hide = $(this).attr('class');
        //check th has value 21,22..etc remove colspan
        $("tr").find("th:contains(" + class_to_hide + ")").attr("colspan", "")
        //check td which has select option
        $("tr td[data-column*=" + $(this).text() + "]").show()
      } else {
        //hide the th
        $(this).hide();
      }
    })
  } else {
    //show 2nd tr > ths 
    $("table tr:eq(1) th ").show()
    //show all td which is > 4
    $("tr").find("td:gt(4)").show()
    //add colspan again
    $("tr:eq(0)").find("th:gt(4)").attr("colspan", "2")
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div align="center">
  <select id="myInput" name="packages" onchange="filter()" title="Search for Package...">
    <option value="" selected="selected">Select Package</option>
    <option value="Bronze">Bronze</option>
    <option value="Silver">Silver</option>
    <option value="Gold">Gold</option>
    <option value="Platinum">Platinum</option>
    <option value="VIP">VIP</option>
    <option value="Dearest">Dearest</option>
    <option value="Once In A Lifetime">Once In A Lifetime</option>
  </select>
  <select id="myInput1" name="nights" onchange="filter()" title="Search for Number of Nights">
    <option value="" selected="selected">Select Nights</option>
    <option value="3">3 Nights</option>
    <option value="4">4 Nights</option>
    <option value="5">5 Nights</option>
  </select>
  <select id="myInput2" name="people" onchange="filter()" title="Search for number of People..">
    <option value="" selected="selected">Select People</option>
    <option value="1">1 Person</option>
    <option value="2">2 People</option>
    <option value="3">3 People</option>
    <option value="4">4 People</option>
  </select>
  <select id="myInput3" name="view" onchange="filter1()" title="Select View">
    <option value="" selected="selected">Select View</option>
    <option value="Both">Both</option>
    <option value="Each">Each</option>
    <option value="Total">Total</option>
  </select>
  <table id="mytab1">
    <thead>
      <tr>
        <th rowspan="2">PACKAGE</th>
        <th rowspan="2">NIGHTS</th>
        <th rowspan="2">PEOPLE</th>
        <th rowspan="2">RAW</th>
        <th rowspan="2">SD</th>
        <th colspan="2">20</th>
        <th colspan="2">21</th>
        <th colspan="2">22</th>
        <th colspan="2">23</th>
        <th colspan="2">24</th>
        <th colspan="2">25</th>
        <th colspan="2">26</th>
        <th colspan="2">27</th>
        <th colspan="2">28</th>
        <th colspan="2">29</th>
        <th colspan="2">30</th>
        <th colspan="2">31</th>
        <th colspan="2">32</th>
        <th colspan="2">33</th>
        <th colspan="2">34</th>
        <th colspan="2">35</th>
        <th colspan="2">36</th>
      </tr>
      <tr>
        <!-- added class here-->
        <th class="20">Each</th>
        <th class="20">Total</th>
        <th class="21">Each</th>
        <th class="21">Total</th>
        <th class="22">Each</th>
        <th class="22">Total</th>
        <th class="23">Each</th>
        <th class="23">Total</th>
        <th class="24">Each</th>
        <th class="24">Total</th>
        <th class="25">Each</th>
        <th class="25">Total</th>
        <th class="26">Each</th>
        <th class="26">Total</th>
        <th class="27">Each</th>
        <th class="27">Total</th>
        <th class="28">Each</th>
        <th class="28">Total</th>
        <th class="29">Each</th>
        <th class="29">Total</th>
        <th class="30">Each</th>
        <th class="30">Total</th>
        <th class="31">Each</th>
        <th class="31">Total</th>
        <th class="32">Each</th>
        <th class="32">Total</th>
        <th class="33">Each</th>
        <th class="33">Total</th>
        <th class="34">Each</th>
        <th class="34">Total</th>
        <th class="35">Each</th>
        <th class="35">Total</th>
        <th class="36">Each</th>
        <th class="36">Total</th>
      </tr>
    </thead>
    <tbody>
<tr>    <td data-column="Package">  Bronze  </td>   <td data-column="Nights">   3   </td>   <td data-column="People">   1   </td>   <td data-column="RAW">  Not Inc </td>   <td data-column="SD">   Not Inc </td>   <td data-column="WM20 Each">    --  </td>   <td data-column="WM20 Total">   --  </td>   <td data-column="WM21 Each">    --  </td>   <td data-column="WM21 Total">   --  </td>   <td data-column="WM22 Each">    --  </td>   <td data-column="WM22 Total">   --  </td>   <td data-column="WM23 Each">    --  </td>   <td data-column="WM23 Total">   --  </td>   <td data-column="WM24 Each">    --  </td>   <td data-column="WM24 Total">   --  </td>   <td data-column="WM25 Each">    --  </td>   <td data-column="WM25 Total">   --  </td>   <td data-column="WM26 Each">    --  </td>   <td data-column="WM26 Total">   --  </td>   <td data-column="WM27 Each">    --  </td>   <td data-column="WM27 Total">   --  </td>   <td data-column="WM28 Each">    --  </td>   <td data-column="WM28 Total">   --  </td>   <td data-column="WM29 Each">    --  </td>   <td data-column="WM29 Total">   --  </td>   <td data-column="WM30 Each">    --  </td>   <td data-column="WM30 Total">   --  </td>   <td data-column="WM31 Each">    --  </td>   <td data-column="WM31 Total">   --  </td>   <td data-column="WM32 Each">    $1,225  </td>   <td data-column="WM32 Total">   $1,225  </td>   <td data-column="WM33 Each">    --  </td>   <td data-column="WM33 Total">   --  </td>   <td data-column="WM34 Each">    --  </td>   <td data-column="WM34 Total">   --  </td>   <td data-column="WM35 Each">    $2,080  </td>   <td data-column="WM35 Total">   $2,080  </td>   <td data-column="WM36 Each">    --  </td>   <td data-column="WM36 Total">   --  </td>   </tr>
<tr>    <td data-column="Package">  Bronze  </td>   <td data-column="Nights">   3   </td>   <td data-column="People">   2   </td>   <td data-column="RAW">  Not Inc </td>   <td data-column="SD">   Not Inc </td>   <td data-column="WM20 Each">    --  </td>   <td data-column="WM20 Total">   --  </td>   <td data-column="WM21 Each">    --  </td>   <td data-column="WM21 Total">   --  </td>   <td data-column="WM22 Each">    --  </td>   <td data-column="WM22 Total">   --  </td>   <td data-column="WM23 Each">    --  </td>   <td data-column="WM23 Total">   --  </td>   <td data-column="WM24 Each">    --  </td>   <td data-column="WM24 Total">   --  </td>   <td data-column="WM25 Each">    --  </td>   <td data-column="WM25 Total">   --  </td>   <td data-column="WM26 Each">    --  </td>   <td data-column="WM26 Total">   --  </td>   <td data-column="WM27 Each">    --  </td>   <td data-column="WM27 Total">   --  </td>   <td data-column="WM28 Each">    --  </td>   <td data-column="WM28 Total">   --  </td>   <td data-column="WM29 Each">    --  </td>   <td data-column="WM29 Total">   --  </td>   <td data-column="WM30 Each">    --  </td>   <td data-column="WM30 Total">   --  </td>   <td data-column="WM31 Each">    --  </td>   <td data-column="WM31 Total">   --  </td>   <td data-column="WM32 Each">    $775    </td>   <td data-column="WM32 Total">   $1,550  </td>   <td data-column="WM33 Each">    --  </td>   <td data-column="WM33 Total">   --  </td>   <td data-column="WM34 Each">    --  </td>   <td data-column="WM34 Total">   --  </td>   <td data-column="WM35 Each">    $1,475  </td>   <td data-column="WM35 Total">   $2,950  </td>   <td data-column="WM36 Each">    --  </td>   <td data-column="WM36 Total">   --  </td>   </tr>
    </tbody>
  </table>
</div>

1 个答案:

答案 0 :(得分：1)

您已经快到了，因为在jsfiddle示例中已经有一个@media查询。您可以覆盖输入的宽度，以便在较小的屏幕上将其全角显示。

尝试在您的@media查询底部添加类似的内容：

@media only screen and (max-width: 760px), 
(min-device-width: 768px) and (max-device-width: 1024px) {
   
    /* add the following below the other styles in the media query: */
    #myInput,
    #myInput1,
    #myInput2,
    #myInput3 {
        width: 100%; /* make the input full width */
        margin-bottom: 5px; /* optional: add some spacing between the vertical inputs */
    }

}
相关问题
最新问题