我想从dropdrown中选择一个值，它应该改变html页面和地图页面中的列表

I want to select a value from dropdrown which should change the listings in html page and the map page

本文关键字：html 改变 列表 地图 选择 dropdrown 一个      更新时间：2023-09-26

我已经创建了html页面与列表，我有另一个页面与谷歌地图页面为这些列表。我需要有一个下拉的html页面，在那里我可以改变它的值根据所选的值在html和地图页面的清单应显示。

Update 1.0

这里是使用js的技巧。假设具有id=map的容器是一个映射。当用户点击选择列表时它会显示地图。为了让你的背景地图看起来很漂亮，我建议使用这个。

建议你这是不好的做法。但对于初学者来说，这是如何解决的。

https://hpneo.github.io/gmaps/

例子HTML 

    <div class="container" id="test">
    <p> Hello World</p>
    <select id="status" onChange="myFunction()">
            <option value="1">Select Map </option>
            <option value="2">Australia </option>
            <option value="3">Japan </option>
            <option value="4">Malaysia </option>
             <option value="5">Korea </option>
    </select>
    <button >Submit</button>
</div>
<br/>
<div class="container" id="map" style="display:none;">
    <p> Container aussie</p>
</div>
<div class="container" id="map1" style="display:none;">
    <p> Container Japan</p>
</div>
<div class="container" id="map2" style="display:none;">
    <p> Container Malaysia</p>
</div>
<div class="container" id="map3" style="display:none;">
    <p> Container Korea</p>
</div>
CSS 

.container{
    width: 50%;
    border: 1px solid red;
    padding: 2px 15px 13px 20px;
}

JS 

  function myFunction() {
    if (document.getElementById('status').value == "1"){
    document.getElementById("map").style.display="none";
    document.getElementById("map1").style.display="none";
    document.getElementById("map2").style.display="none";
    document.getElementById("map3").style.display="none";
}
    if (document.getElementById('status').value == "2"){
    document.getElementById("map").style.display="block";
    document.getElementById("map1").style.display="none";
    document.getElementById("map2").style.display="none";
    document.getElementById("map3").style.display="none";
}
    if (document.getElementById('status').value == "3"){
    document.getElementById("map").style.display="none";
    document.getElementById("map1").style.display="block";
    document.getElementById("map2").style.display="none";
    document.getElementById("map3").style.display="none";
}
    if (document.getElementById('status').value == "4"){
    document.getElementById("map").style.display="none";
    document.getElementById("map1").style.display="none";
    document.getElementById("map2").style.display="block";
    document.getElementById("map3").style.display="none";
}
    if (document.getElementById('status').value == "5"){
    document.getElementById("map").style.display="none";
    document.getElementById("map1").style.display="none";
    document.getElementById("map2").style.display="none";
    document.getElementById("map3").style.display="block";
}
}

演示

有很多比这更好的方法。就像我说的，这只是个把戏。

相关文章：