时间戳

首页 > 解决方案 > 如何使用 Javascript 将菜单连接到显示器？

javascript - 如何使用 Javascript 将菜单连接到显示器？

问题描述

所以我想将我的 HTML 列表连接到一个 javascript 显示，所以它就像这个 giff：https ://tabard.fr/cours/2021/web/resultat.gif 。所以这是我的 HTML 和我的 JS 代码。

<label for="Villes-select">Choisie une ville:</label>
    <select onchange="showCity()" ; name="Villes" id="Villes-select" >
    <option value="">--Selectionner une option--</option>
    <option value="Paris">Paris</option>
    <option value="Lyon">Lyon</option>
    <option value="Genève">Genève</option>
</select>

   <h1> <strong> TP Météo </strong> </h1>
  <p> Ce site affiche les météo des villes quand vous le voulez ou vous le voulez  </p>
  <div class="flex">
  
     
    <div class="city" id="Paris"> <h2> Paris </h2>
  <p> -1°C <img src="C:/Users/Dell/Downloads/Icon HTML/Thermo.png" alt="image1" height="25" width="25"/> <img src="C:/Users/Dell/Downloads/Icon HTML/Paris.png" alt="image2" height="25" width="25"/> </p> </div>
    <div class="city" id="Lyon"> <h2> Lyon </h2>
<p> 0°C <img src="C:/Users/Dell/Downloads/Icon HTML/Thermo.png" alt="image1" height="25" width="25"/> <img src="C:/Users/Dell/Downloads/Icon HTML/SunCloud.png" alt="image3" height="25" width="25"/> </p> </div>   
    <div class="city" id="Genève"> <h2> Genève </h2>
<p> 6°C <img src="C:/Users/Dell/Downloads/Icon HTML/Thermo.png" alt="image1" height="25" width="25"/> <img src="C:/Users/Dell/Downloads/Icon HTML/SunIcon.png" alt="image4" height="25" width="25"/> </p> </div>
    </div>

function showCity(){
var elements = document.querySelectorAll('.city');
for (var i=0 ; i< elements.length ; i++){
    var element = elements[i];
}
let nomVillesSelectionnee = document.getElementById('Villes-select');
let cities = document.getElementsByClassName('city');
for(var i=0; i < 1  ; ++i){
    if(cities[i]= nomVillesSelectionnee){
        element.style.display= "none";
    }
    else{
        element.style.display= "";
    }
}

}

标签： javascripthtmlcss

解决方案

您的代码存在多个问题，但这应该让您非常接近。

function showCity(){
  var cities = document.querySelectorAll('.city');
  let nomVillesSelectionnee = document.getElementById('Villes-select').value;

  for(var i=0; i < cities.length; ++i){
    if(cities[i].id == nomVillesSelectionnee){
        cities[i].style.display = "";
    }
    else{
        cities[i].style.display = "none";
    }
  }   
}
<label for="Villes-select">Choisie une ville:</label>
    <select onchange="showCity()" ; name="Villes" id="Villes-select" >
    <option value="">--Selectionner une option--</option>
    <option value="Paris">Paris</option>
    <option value="Lyon">Lyon</option>
    <option value="Genève">Genève</option>
</select>

   <h1> <strong> TP Météo </strong> </h1>
  <p> Ce site affiche les météo des villes quand vous le voulez ou vous le voulez  </p>
  <div class="flex">
  
     
    <div class="city" id="Paris"> <h2> Paris </h2>
  <p> -1°C <img src="C:/Users/Dell/Downloads/Icon HTML/Thermo.png" alt="image1" height="25" width="25"/> <img src="C:/Users/Dell/Downloads/Icon HTML/Paris.png" alt="image2" height="25" width="25"/> </p> </div>
    <div class="city" id="Lyon"> <h2> Lyon </h2>
<p> 0°C <img src="C:/Users/Dell/Downloads/Icon HTML/Thermo.png" alt="image1" height="25" width="25"/> <img src="C:/Users/Dell/Downloads/Icon HTML/SunCloud.png" alt="image3" height="25" width="25"/> </p> </div>   
    <div class="city" id="Genève"> <h2> Genève </h2>
<p> 6°C <img src="C:/Users/Dell/Downloads/Icon HTML/Thermo.png" alt="image1" height="25" width="25"/> <img src="C:/Users/Dell/Downloads/Icon HTML/SunIcon.png" alt="image4" height="25" width="25"/> </p> </div>
    </div>

推荐阅读