Изменение нескольких значений диапазона с опцией выбора

Question

Я хочу изменить несколько значений диапазона в зависимости от значения поля выбора. См. Мой код ниже.

HTML:

<select id="selectCountry"> 
    <option value="0">Netherlands</option> 
    <option value="1">Germany</option> 
    <option value="2">Switzerland</option> 
</select> 

Javascript/JQuery

var addressData = [{"addressName": "Spiegelhof", 
      "addressStreet": "Herengracht 466", 
      "addressCity": "1017 CA Amsterdam", 
      "addressCountry": "the Netherlands", 
      "countryOne": "Netherlands", 
      "countryTwo": "Belgium", 
      "phoneOne": "+31 20 658 9800", 
      "phoneTwo": "+32 2 588 12 77", 
      "code": "NL"}, 
     {"addressName": " ", 
      "addressStreet": " ", 
      "addressCity": "Munchen", 
      "addressCountry": "Deutschland", 
      "countryOne": "Germany", 
      "countryTwo": "Switzerland", 
      "phoneOne": " ", 
      "phoneTwo": " ", 
      "code": "DE"}]; 


$(document).ready(function() { 
$("#selectCountry").change(function() { 
    var value = $('#selectCountry').val(); 
    $('#addressName').html($(this).addressData[value].addressName); 
    $('#addressStreet').html($(this).addressData[value].addressStreet); 
    $('#addressCity').html($(this).addressData[value].addressCity); 
    $('#addressCountry').html($(this).addressData[value].addressCountry); 
}).change(); 
}); 

Моя консоль ВОФК он не может прочитать свойство [стоимости] не определено. Не соответствуют ли мои данные JSON? Должен ли он разбираться, и если да, то как? Или кто-нибудь знает другое решение этой проблемы.

Заранее благодарен!

Answer 1

В вашем примере addressData - это массив в глобальной области видимости, а не свойство элемента jquery $ (this). Попробуйте это:

$('#addressName').html(addressData[value].addressName); 
$('#addressStreet').html(addressData[value].addressStreet); 
$('#addressCity').html(addressData[value].addressCity); 
$('#addressCountry').html(addressData[value].addressCountry); 

Answer 2

Вы не должны использовать $(this), когда вы настраиваете содержание HTML из span элементов. Это должно выглядеть примерно так:

$('#addressName').html(addressData[value].addressName); 

Answer 3

Вы не должны использовать $(this) читать addressData, как $(this) относится к selectCountry поле выбора, удалите его.

$(document).ready(function() { 
$("#selectCountry").change(function() { 
    var value = $('#selectCountry').val(); 
    $('#addressName').html(addressData[value].addressName); 
    $('#addressStreet').html(addressData[value].addressStreet); 
    $('#addressCity').html(addressData[value].addressCity); 
    $('#addressCountry').html(addressData[value].addressCountry); 
}).change(); 
});