表单不适用于服务器，仅适用于移动版本

Question

当我在本地主机上时，网站和表格工作正常，但当它上传到服务器时，表格仅适用于桌面版本，在移动设备上，表格不过滤，只显示所有专业人士。该网站使用 bootstrap 和 javascript.

构建



<script type="text/javascript">
  window.onload=function(){
var element1 = document.getElementById("link-index");
element1.classList.remove("active");
     var element = document.getElementById("link-profesionales");
     element.classList.add("active");
}
</script>
<div class=" p-2" style="background-color: #f2f3f4;">
<nav class="" aria-label="breadcrumb">
  <div class=" col-sm-1 col-md-12 col-lg-12">
    <ol class="breadcrumb">
      <li class="ms-lg-5 ms-4 breadcrumb-item"><a class="breadcrumb-css" href="index.php">Inicio</a></li>
      <li class="breadcrumb-item active" aria-current="page">Profesionales</li>
    </ol>
  </div><h1 class="ms-lg-5 ms-4">Profesionales</h1>
</nav>
</div>

<style type="text/css">

/* Create three equal columns that floats next to each other */
.column {
  display: none; /* Hide columns by default */
  
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.card-footer{
position:absolute;
  bottom:0;
  width:100%;
  background-color: white;
}

.form-select:focus {
  border-color: #FFBE2C;
  outline: 0;
  box-shadow: 0 0 0 0.25rem #FFBE2C;
}
/* 
select option {
    background-color: #FFBE2C;
    font-weight: bold;
    color: white;
}

 
select option:checked{
    box-shadow: 0 0 10px 100px #1882A8;
    background-color: #FFBE2C;
    font-weight: bold;
    color: white;
}
*/
</style>

<div class="container">
    <div class="row">
<div class="mt-5 col-12 text-center">

<div class="btn-group col-auto" role="group" aria-label="Basic example">
  <form class="" method="GET" action="profesionales.php" id="formprofeesionales" >
    <label style="font-weight: bold;" for="exampleFormControlInput1" class="form-label col-md-8">Consultar por Especialidad:</label>
    <select id="select1" onchange="filterSelection('all')" class="form-select" aria-label="Default select example">
  <option selected value="all">Todos</option>
  <option onclick="filterSelection('Fisioterapia')" value="Fisioterapia">Fisioterapia</option>
  <option onclick="filterSelection('Fonoaudiología')" value="Fonoaudiología">Fonoaudiología</option>
  <option onclick="filterSelection('Psicología')" value="Psicología">Psicología</option>
</select>
</form>
</div>
</div>
</div>




<!-- Portfolio Gallery Grid -->
<div class="row row-cols-2 g-2 row-cols-md-6 mt-1">
  
  <div class="border-0 me-lg-4 my-lg-4  col card column Fonoaudiología">
    <div class="content">
      <div class="h-100 card ">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">María Silvina Luchino</h5>
    <p class="card-text">Fonoaudiologa</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div>
    <div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
        </div>
    </div>
  </div>

  <div class="border-0 me-lg-4 my-lg-4 col card column Psicología">
      <div class="h-100 card ">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">Milanesa Ola</h5>
    <p class="card-text">Psicología</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div>
    <div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
    </div>
    </div>

<div class="border-0 me-lg-4 my-lg-4 col card column Psicología">
    <div class="content">
      <div class="h-100 card ">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">Carla Paguaga de Santos</h5>
    <p class="card-text">Psicología</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div><div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
        </div>
    </div>
  </div>
<div class="border-0 me-lg-4 my-lg-4 col card column Psicología">
      <div class="h-100 card ">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">Marta</h5>
    <p class="card-text">Psicología</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div><div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
    </div>
    </div>
    <div class="border-0 me-lg-4 my-lg-4 col card column Psicología">
      <div class="h-100 card ">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">Lucia</h5>
    <p class="card-text">Psicología</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div><div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
        </div>
    </div>
  
  
    <div class="border-0 me-lg-4 my-lg-4 col card column Fonoaudiología">
      <div class="h-100 card ">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">Elena</h5>
    <p class="card-text">Fonoaudiologa</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div><div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
        </div>
    </div>
  
  
    <div class="border-0 me-lg-4 my-lg-4 col card column Fisioterapia">
      <div class="h-100 card">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">Susana</h5>
    <p class="card-text">Fisioterapia</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div><div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
        </div>
    </div>
 

<!-- END GRID -->
</div> 
        
    


</div>


<?php include 'footer.html'; ?>

表格在移动设备上显示并且可以选择，但没有filter/work。有什么问题吗？提前致谢！

Answer 1

从 select 元素中删除所有事件侦听器。它应该类似于下面的示例。

<select id="select1" class="form-select" aria-label="Default select example">
  <option selected value="all">Todos</option>
  <option value="Fisioterapia">Fisioterapia</option>
  <option value="Fonoaudiología">Fonoaudiología</option>
  <option value="Psicología">Psicología</option>
</select>

然后在您的 JavaScript 文件中添加一个事件侦听器。这将监听 #select1 元素上的 change 事件。每当发生更改时，它都会获取 select 元素的当前值（即 selected 选项的值）并将其传递给 filterSelection 调用。

$(document).ready(function() {
  $('#select1').on('change', function() {
    const value = $(this).val();
    filterSelection(value);
  });
});

表单不适用于服务器，仅适用于移动版本

Form doesn't work on server and only on mobile version

html

javascript

css

forms

bootstrap-5