通过select下拉框切换内容

点击select实现不同盒子显示与隐藏（常用js与jequery方法）

通过select下拉菜单，实现切换盒子中的显示内容

<select name="" id="" onclick="select_event(this.options[this.selectedIndex].value);">
        <option value="mapselect" selected>地图</option>
        <option value="listselect">列表</option>
    </select>
        <div class="map" id="map1" style="background-color: yellow;width: 200px;height: 200px;">
            133333
        </div>
        <div class="list" id="list1" style="background-color: yellow;width: 200px;height: 200px; display: none">
            464646
        </div>
    <script>
        function select_event(value) {
            document.getElementById("map1").style.display = "none";
            document.getElementById("list1").style.display = "none";
            if (value === "mapselect") {
                document.getElementById("map1").style.display = "";
            } else if (value === "listselect") {
                document.getElementById("list1").style.display = "";
            }   
        }
    </script>

此方法为js原生写法，利用option中的value值，在点击的传出value值，再根据value值的不同切换盒子的显示与隐藏