Javascript 从两个div调用GeoCode函数

我对此非常陌生，尝试运行GeoCode函数并从两个不同的DIV id调用它。它适用于我从美国各州下拉列表中调用的第一个div，但不适用于第二个加拿大各州下拉列表。请帮帮我

这是我的HTML：

<select class="address" value="Geocode" onchange="codeAddress(this)">
    <option>Select</option>
    <option value="Alabama,AL">Alabama</option>
    <option value="Alaska,AK">Alaska</option>
    <option value="Arizona,AZ">Arizona</option>
    <option value="Arkansas,AR">Arkansas</option>
    <option value="California,CA">California</option>
    <option value="Colorado,CO">Colorado</option>
    <option value="Connecticut,CT">Connecticut</option>
</select>
<select class="address" value="Geocode" onchange="codeAddress(this)">
    <option>Select</option>
    <option value="Alberta,AB">Alberta</option>
    <option value="British Columbia,BC">British Columbia</option>
    <option value="Manitoba,MB">Manitoba</option>
    <option value="New Brunswick,NB">New Brunswick</option>
    <option value="Newfoundland and Labrador,NL">Newfoundland and Labrador</option>
</select>

---

不能有两个具有相同id的不同HTML元素

您可以将脚本基于类而不是选择id：

<select class="address" value="Geocode">
    <option>Select</option>
    <option value="Alabama,AL">Alabama</option>
    <option value="Alaska,AK">Alaska</option>
</select>

<select class="address" value="Geocode">
    <option>Select 2</option>
    <option value="Alberta,AB">Alberta</option>
    <option value="British Columbia,BC">British Columbia</option>
</select>

编辑：

将jQuery代码包装在$document.ready函数中。

---

在编辑代码之前，我注意到有一行代码带有奇怪的引号：Thank you@MrUpsidown。这确实很有帮助！不客气。请接受答案，如果它确实解决了你的问题。我尝试了代码，但看起来我仍然犯了一些错误。你能帮我追踪一下，我哪里出了问题。什么不起作用？您是否像我的示例中那样添加了类？您是否相应地修改了代码？非常感谢！你是对的，代码现在起作用了。我花了一些时间才把它做好。我只能说，我还处于非常初级的水平

<select class="address" value="Geocode">
    <option>Select</option>
    <option value="Alabama,AL">Alabama</option>
    <option value="Alaska,AK">Alaska</option>
</select>

<select class="address" value="Geocode">
    <option>Select 2</option>
    <option value="Alberta,AB">Alberta</option>
    <option value="British Columbia,BC">British Columbia</option>
</select>

$('.address').change(function () {

    codeAddress($(this).val());
});

function codeAddress(address) {

    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            map.setZoom(7);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

$(function () {
    $('.address').change(function () {

        codeAddress($(this).val());
    });
});