根据下拉选择更改DIV的URL

Question

我试图寻找答案，但不幸的是我无法找到解决方案，因为我的问题非常具体到我正在使用的工具。

长话短说 - 我需要能够通过下拉框选择一个URL。 每个URL都链接到tableau仪表板的不同视图。 我正在使用自定义HTML页面，因为我需要自动刷新仪表板而无需人工干预。 我需要有一个可重复使用的页面，因为我将在以后将其嵌入到另一个应用程序中。

对于刷新，我将URL传递给Tableau javascript API并使用API​​刷新div。

<html>
    <head>
    <script type="text/javascript" src="https://data.medcity.net/javascripts/api/tableau-2.0.3.js"></script>
    </head>
    <body>
        <div id="dropdown" style="position:absolute,z-index:2">
            <select id="dashboard">
                <option value="url to dashboard1">Dashboard 1</option>
                <option value="url to dashboard2">Dashboard 2</option>
                <option value="url to dashboard3">Dashboard 3</option>
                <option value="url to dashboard4">Dashboard 4</option>
            </select>
        </div>
        <div id="rt" style="position:absolute,z-index:1">
        <div>
        <script type='text/javascript'>
            var placeholder = document.getElementById("rt");
            var url = document.getElementById("dashboard").value;
            var options = {
                width: "1900px",
                height: "330px",
                hideTabs: true,
                //hideToolbar: true 
            };
            var viz = new tableauSoftware.Viz(placeholder, url, options);
            setInterval(function(){viz.refreshDataAsync()},30000);
        </script>
    </body>
</html>

我需要能够从下拉列表中选择一个项目，它会自动将URL传递给API，以便它将加载新页面并运行刷新功能。

任何帮助将不胜感激。