html5において、プルダウンにより画像や動かすスクリプトを変更したい

　実現したいこと、htmlにおいて、プルダウンにより画像や動かすスクリプトを変更したい。
例えば、東京と選択肢した場合、東京の時刻が表示され、ニューヨークを選択したらニューヨークの時刻が表示されるようなイメージです。

　問題点；プルダウンを変えても出力結果が変わらない。
スクリプト部分がclass　box　の中に上手く入れられていないのでしょうか。htmlの文字だけなら表示させることが出来たので、プルダウンによる切り替え自体は出来ているような気がします。
また、画像を表示するcssの紐づけのしかたも分かりません。ご教授頂けると幸いです。

---以下ソースコード---

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .boxArea .box { display: none; } </style> </head> <body>

<form>
    <label>
        <select id="changeSelect1">
            <option value=0">選択してください</option>
            <option value="1">東京</option>
            <option value="2">ニューヨーク</option>
            <option value="3">ロンドン</option>

        </select>
    </label>
</form>
<p id="box">
<div class="boxArea">
    <div class="box">
        <script type="text/javascript">
            function Time() {
                var time = new Date();
                var tokyotime = (time.toLocaleString({
                    timeZone: 'Asia/Tokyo'
                }));
                document.getElementById("box").innerHTML = tokyotime;
            }
            setInterval('Time()', 500);
        </script>
    </div>
    <div class="box">
        <script type="text/javascript">
            function Time() {
                var time = new Date();
                var tokyotime = (time.toLocaleString({
                    timeZone: 'Asia/Tokyo'
                }));
                document.getElementById("box").innerHTML = tokyotime;
            }
            setInterval('Time()', 500);
        </script>
    </div>
    <div class="box">
        <script type="text/javascript">
            function Time() {
                var time = new Date();
                var newyorktime = (time.toLocaleString({
                    timeZone: 'America/New_York'
                }));
                document.getElementById("box").innerHTML = newyorktime;
            }
            setInterval('Time()', 500);
        </script>
    </div>
    <div class="box">
        <script type="text/javascript">
            function Time() {
                var time = new Date();
                var londontime = (time.toLocaleString({
                    timeZone: 'Europe/London'
                }));
                document.getElementById("box").innerHTML = londontime;
            }
            setInterval('Time()', 500);
        </script>
    </div>
</div>
<script type="text/javascript">
    var select = document.getElementById('changeSelect1');
    select.addEventListener('change', function() {
        var boxes = document.getElementsByClassName('box');
        var val = this.value;
        for (var i = 0; i < boxes.length; i++) {
            boxes[i].style.display = (i === parseInt(val)) ? 'block' : 'none';
        }
    });
</script>

</body> </html>