jquery獲取輸入值以檢索匹配的數組值，以填充隱藏的輸入

尋找關於用於提取存儲在數組中的緯度/長度值的表單的一些指導。代碼示例不完整（對不起），只是在粗糙的階段。jquery獲取輸入值以檢索匹配的數組值，以填充隱藏的輸入

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

當輸入城市字段（實際上使用自舉的實際形式預輸入）的輸入，所輸入的值（提交表單之前），需要被用於搜索陣列和提取匹配的緯度/經度值並將它們輸入到它們各自的隱藏輸入字段中。

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

希望有人能引導我在這個正確的方向。

來源

2013-10-16 geepers

是的，改變數據結構。然後輸入相關值，對象鍵

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

來源

2013-10-16 23:57:11

Thx Jeffman，我上面提出的同樣的問題......如果有90多個城市被引用，你會用geoCity數組值改變什麼嗎？ – geepers

並不多。他們看起來很麻煩，因爲所有的空間，但是可以刪除。如果你把鍵和值放在「雙引號」中，那麼它將是JSON格式。這將有助於在PHP或其他服務器環境中創建對象。 – 2013-10-17 13:41:03

謝謝傑夫曼，這會很好的工作。我已經將你的答案和Chandu的組合調整爲最後的結果。如果沒有輸入城市，使用模糊功能，但也可以將經緯度設置爲空。這是最後的小提琴 - http://jsfiddle.net/swdmedia/ZYYYu/2/ – geepers

您需要如下所述改變地球村對象的結構：

$(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").blur你可以$("#city").closest("form").submit代替。

來源

2013-10-16 23:35:51 Chandu

THX Chandu，你會改變與geoCity數組值什麼，如果有被引用90+城市？ – geepers

jquery獲取輸入值以檢索匹配的數組值，以填充隱藏的輸入

回答

相關問題