使 <select>选项面板显示为手风琴而不显示为下拉菜单

Question

嗨，我正在尝试将标签选项显示为accoridion，而不是下拉列表，但它不能那样工作。

我有这个

<select onclick="document.getElementById('options');" onChange="accordion(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;" class="button-white">

<div id="options">
    <option selected="selected" value="Precipitación">Precipitación +</option>    
    <option value="veggies_search">Humedad</option>
    <option value="animals_search">Precipitación</option>
    <option value="all_search">Presión Atmosférica</option>
    <option value="all_search">Temperatura</option>
    <option value="all_search">Velocidad Viento</option>
</div>

  </select>


<script type="text/javascript">
  function accordion(value){

  }
</script>

我正在使用选择标签，因为我需要在触发按钮上显示所选选项的名称。

 function accordion(value){ } 

 <select onclick="document.getElementById('options');" onChange="accordion(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;" class="button-white"> <div id="options"> <option selected="selected" value="Precipitación">Precipitación +</option> <option value="veggies_search">Humedad</option> <option value="animals_search">Precipitación</option> <option value="all_search">Presión Atmosférica</option> <option value="all_search">Temperatura</option> <option value="all_search">Velocidad Viento</option> </div> </select> 

希望您能够帮助我。 非常感谢

Answer 1

div不是select的有效子级。 您将需要使用一些div和js来实现您的目标。 类似于以下内容：

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { /* Toggle between adding and removing the "active" class, to highlight the button that controls the panel */ this.classList.toggle("active"); /* Toggle between hiding and showing the active panel */ var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } var options = document.getElementsByClassName("option"); for(var o = 0; o < options.length; o++) { options[o].addEventListener('click', function(e) { this.parentElement.previousElementSibling.innerHTML = this.dataset.value; /* alert(e.target.dataset.value); */ }) } 

 /* Style the buttons that are used to open and close the accordion panel */ .accordion, .option { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; font-family: Arial, sans-serif; font-size: 11px; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .accordion:hover, .option:hover { background-color: #ccc; } /* Style the accordion panel. Note: hidden by default */ .panel { padding: 0 18px 0 0; background-color: white; display: none; overflow: hidden; } .option { padding: 9px 18px; } 

 <button class="accordion">Precipitación +</button> <div class="panel"> <div class="option" data-value="Humedad">Humedad</div> <div class="option" data-value="Presión Atmosférica">Presión Atmosférica</div> <div class="option" data-value="Temperatura">Temperatura</div> <div class="option" data-value="Velocidad Viento">Velocidad Viento</div> </div>