javascript - 表单元素从 input 更改为 Select 会破坏 JavaScript 功能

Question

我这里的表单元素效果很好:

<input id="addreessinput1" style="width:20%" value="Enter Address"/>
<input id="showaddress1" type="button" value="Show Tech Home" style="width:10%"/>

这成功启动了下面的 JavaScript 代码。当我更改 areessinput1 时

    <select name="addreessinput1" style="width:20%">
      <option value="my address">my address</option>
    </select>  

我尝试将 $("#showaddress1").click(geoCode1); 从 click 更改为更改，但没有效果。我做错了什么？

function geoCode1(){
    var address = $("#addreessinput1").val();
    geocoder = new google.maps.Geocoder();
    if(geocoder){
        geocoder.geocode( { 'address': address }, function(results, status) { // status is empty
        if (status == google.maps.GeocoderStatus.OK) {
            $("#lnf").css("display","none");
            var mposition = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
            var image = new google.maps.MarkerImage('beachflag.png',
            new google.maps.Size(20, 32),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32));
            var shadow = new google.maps.MarkerImage('beachflag_shadow.png',
            new google.maps.Size(37, 32),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32));
            var shape = {
                coord: [1, 1, 1, 20, 18, 20, 18 , 1],
                type: 'poly'
            };
            if(mapa.addressmarker){
                mapa.addressmarker.setMap(null);
                mapa.bounds = new google.maps.LatLngBounds();
                mapa.map.fitBounds(mapa.bounds);
            }
            mapa.addressmarker = new google.maps.Marker({
                                position: mposition,
                                map:mapa.map,
                                title:address,
                                icon:image,
                                shadow:shadow,
                                shape:shape
                            });
            mapa.bounds.extend(mposition);
            mapa.map.fitBounds(mapa.bounds);
        }
        else if(status == google.maps.GeocoderStatus.ZERO_RESULTS){
            mapa.addressmarker.setMap(null);
            $("#lnf").css("display","block");
        }
    });
    }
}
$(document).ready(function(){
    $("#date1" ).datetimepicker({
        inline: true,
        dateFormat: "yy-mm-dd",
        timeFormat: "HH:mm",
        pickerTimeFormat: "HH:mm"
    });
    $("#date2" ).datetimepicker({
        inline: true,
        dateFormat: "yy-mm-dd",
        timeFormat: "HH:mm",
        pickerTimeFormat: "HH:mm",
        hour: 23,
        minute: 59
    });
    var mapOptions = {center: new google.maps.LatLng(26.549473, -81.847920),
        zoom: mapa.zoom,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    mapa.map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

    $("#user_id").change(getUserMarkers);
    $("#markerslist").change(upMarker);
    $("#getmarkers").click(getUserMarkers);
    $("#showaddress").click(geoCode);
    $("#showaddress1").click(geoCode1); 
});

托尼

Answer 1

关于<input id="addreessinput1" ... />您在 <select name="addreessinput1" ... /> 上使用 id您使用 name 属性。

$("#addreessinput1")很可能找不到选择，因此返回 null作为值。