Question

我创建了带有列表的html页面，我还有另一个页面，其中包含这些列表的谷歌地图页面。我需要在html页面上有一个下拉列表，我可以根据所选值更改html和地图页面中的列表应该显示的值。

Answer 1

更新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";
}
}

DEMO

有很多方法比这更好。就像我说的这只是一个技巧。希望你能比我做的演示更好地实现。

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

1 个答案: