jquery 获取输入值以检索匹配的数组值以填充隐藏输入

Question

寻找有关用于提取存储在数组中的纬度/经度值的表单的一些指导。代码示例不完整（抱歉），只是处于粗略阶段。

<script type="text/javascript">
$document.ready(function(){
    var geoCity = [
        { 'Toronto', '43.6532', '-79.3831'},
        { 'Vancouver', '49.2612', '-123.1139'},
        { 'Calgary', '51.04532', '-114.0581'}
    ];
});
</script>

当输入城市字段时（实际上是在实际表单上使用bootstrap的typeahead），输入的值（在提交表单之前），需要用于搜索数组并提取匹配的纬度/经度值并输入它们到各自的隐藏输入字段中。

<input type="text" id="city" name="city" value="" />
<input type="hidden" id="latitude" name="latitude" value="" />
<input type="hidden" id="longitude" name="longitude" value="" />

希望有人能引导我朝着正确的方向前进。

Answer 1

是的，改变数据结构。然后将输入值与对象键相关联

$(function () {
    var geoCity = {
        'Toronto': {
            'lat': '43.6532',
            'lon': '-79.3831'
        },

        'Vancouver': {
            'lat': '49.2612',
            'lon': '-123.1139'
        },

        'Calgary': {
            'lat': '51.04532',
            'lon': '-114.0581'
        }
    };

    $('#button').click(function () {
        var lat, lon, city = $('#city').val();
        if (city) {
            lat = geoCity[city].lat;
            lon = geoCity[city].lon;
            $('#latitude').val(lat);
            $('#longitude').val(lon);
        }
    });
});

Fiddle

Answer 2

您需要更改 geoCities 对象的结构，如下所述：

$(function () {
    var geoCity = [{
        'city': 'Toronto',
        'location': ['43.6532', '-79.3831']
    }, {
        'city': 'Vancouver',
        'location': ['49.2612', '-123.1139']
    }, {
        'city': 'Calgary',
        'location': ['51.04532', '-114.0581']
    }];

    $("#city").blur(function () {
        $("#latitude").val("");
        $("#longitude").val("");
        var curCity = $("#city").val();
        var location = $.map(geoCity, function (itm) {
            if (itm.city === curCity) 
                return itm.location; 
        });
        if(location) {
            $("#latitude").val(location[0]);
            $("#longitude").val(location[1]);
        }
    });
});

JsFiddle：http://jsfiddle.net/BJwhu/

您可以$("#city").closest("form").submit 代替$("#city").blur。