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

jquery get input value to retrieve matching array values to populate hidden inputs

本文关键字：输入 数组 隐藏 填充 检索 获取 jQuery      更新时间：2023-09-26

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

<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>

当为 city 字段输入输入时（实际上在实际表单上使用 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="" />

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

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

$(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);
        }
    });
});

小提琴

您需要更改 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]);
        }
    });
});

小提琴：http://jsfiddle.net/BJwhu/

您可以$("#city").closest("form").submit而不是$("#city").blur。

相关文章：