傳遞額外的表單值與jQuery填充選擇框

Question

對不起，發佈尷尬的標題 - 我不知道怎麼說。

我有一個表格，用戶被要求選擇他最喜歡的商店位置。有3個選擇框具有城市，州和街道地址值。我能夠使用另一篇文章中找到的代碼來設置表單，因此當用戶選擇某個州時，只會顯示該州的城市，一旦選擇城市，則只顯示該城市的商店。這部分工作完美。

但是，我還需要根據所選商店傳遞2個更多值，存儲號和區域ID。我已經擺弄了幾個小時的腳本，並且無法弄清楚如何分配和傳遞附加值。我是jQuery的新手，仍然無法完全識別每個函數在做什麼。任何幫助將不勝感激！

下面是我的代碼示例：

<script type="text/javascript"> 
$(document).ready(function() { 
$('select#FavState').change(function (e) { 
    var cityOptions = getCityOptions($(this).val()); 
    $('select#FavCity').html(''); // clear the existing options 
    $.each(cityOptions, function (i, o) { 
     $('<option>' + o + '</option>').appendTo('select#FavCity'); 
    }); 
}); 
$('select#FavCity').change(function (e) { 
    var streetOptions = getStreetOptions($(this).val()); 
    $('select#FavStreet').html(''); // clear the existing options 
    $.each(streetOptions, function (i, o) { 
     $('<option>' + o + '</option>').appendTo('select#FavStreet'); 
    }); 
}); 

function getCityOptions(val) { 
    if (val == '0') return ['Select City']; 
    if (val == 'CT') return ['Avon', 'Bridgeport', 'Bristol', 'Cromwell', 'Danbury', 'Darien', 'East Windsor', 'Enfield', 'Hartford', 'Manchester', 'Milford', 'Mystic', 'Naugatuck', 'Newington', 'North Haven', 'Norwich', 'Plainville', 'Southbury', 'Southington', 'Unionville', 'Vernon', 'Waterbury', 'Wethersfield', 'Willimantic', 'Windsor Locks']; 
    if (val == 'DE') return ['Dover', 'Hockessin', 'Middletown', 'Newark', 'Rehoboth Beach', 'Seaford', 'Wilmington']; 

} 

function getStreetOptions(val) { 
    if (val == '0') return ['Select Street']; 
    if (val == 'Avon') return ['347 West Main Street']; 
    if (val == 'Bridgeport') return ['4545 North Main Street']; 
    if (val == 'Bristol') return ['240 Buckland Street']; 
    if (val == 'Cromwell') return ['48 Berlin Road']; 
} 

}); 
</script> 

和窗體上的選擇字段：

<form> 
<select name="FavState" id="FavState"> 
    <option selected="selected" value="0">Select State</option> 
    <option value="CT">Connecticut</option> 
    <option value="DE">Delaware</option> 
    <option value="FL">Florida</option> 
</select> 
<select name="FavStreet" id="FavStreet" class="formFields longSelectLists"> 
    <option selected="selected" value="0">Select Street</option> 
</select> 
<input name="StoreNumber" id="StoreNumber" type="hidden" /> 
<input name="RegionID" id="RegionID" type="hidden" /> 
</form> 

我嘗試添加該到getStreetOptions功能：

if (val == 'Avon') return ['347 West Main Street']; 
     $('input#StoreNumber').val('4239'); 
     $('input#RegionID]').val('6'); 

但我想我需要添加一個函數，所以有某種觸發器？

Answer 1

儲存於對象

var address = {}; 

if(val == 'Avon') { 

    address["street"] = ['347 West Main Street']; 
    address["StoreNumber"] = 4239; 
    address["region"] = 6; 
} 

return address; 

的形式然後用地址對象和在對應的字段中顯示它們。

你可以試試這個代碼。它可以被重新分解雖然

// Store the info in the form of nested objects so that it is easier to retrieve and change 
var city = { 
    '0': ['Not Available'], 
     'CT': ['Avon', 'Bridgeport', 'Bristol', 'Cromwell', 'Danbury', 'Darien', 'East Windsor', 'Enfield', 'Hartford', 'Manchester', 'Milford', 'Mystic', 'Naugatuck', 'Newington', 'North Haven', 'Norwich', 'Plainville', 'Southbury', 'Southington', 'Unionville', 'Vernon', 'Waterbury', 'Wethersfield', 'Willimantic', 'Windsor Locks'], 
     'DE': ['Dover', 'Hockessin', 'Middletown', 'Newark', 'Rehoboth Beach', 'Seaford', 'Wilmington'] 
}, street = { 
    '0': { 
     'address': ['Not Available'], 
      'StoreNumber': 0, 
      'RegionID': 0 
    }, 
     'Avon': { 
     'address': ['347 West Main Street'], 
      'StoreNumber': 4239, 
      'RegionID': 7 
    }, 
     'Bridgeport': { 
     'address': ['4545 North Main Street'], 
      'StoreNumber': 5656, 
      'RegionID': 12 
    }, 
     'Bristol': { 
     'address': ['240 Buckland Street'], 
      'StoreNumber': 8976, 
      'RegionID': 123 
    }, 
     'Cromwell': { 
     'address': ['48 Berlin Road'], 
      'StoreNumber': 8976, 
      'RegionID': 123 
    } 
}; 

// Cache your selectors so that you walk the DOM only once 
var $favState = $('#FavState'), 
    $favCity = $('#FavCity'), 
    $favStreet = $('#FavStreet'), 
    $storeInput = $('#StoreNumber'), 
    $regionInput = $('#RegionID'); 


$(document).ready(function() { 
    $favState.change(function (e) { 
     var value = this.value; 
     // Access the object like city['CT'] .. That gives the Array 
     city[value] !== undefined ? city[value] : '0'; 
     var cityOptions = city[value]; 
     $favCity.html(''); // clear the existing options 
     $.each(cityOptions, function (i, o) { 
      $('<option>' + o + '</option>').appendTo('#FavCity'); 
     }); 
    }); 

    $favCity.change(function (e) { 
     var value = this.value; 
     // Access the object like street['Avon'] .. That gives an object 

     value = street[value] !== undefined ? value : '0'; 
     // This returns array 
     var streetOptions = street[value].address, 
      storeNumber = street[value].StoreNumber, 
      regionID =street[value].RegionID; 

     $favStreet.html(''); // clear the existing options 
     $.each(streetOptions, function (i, o) { 
      $('<option>' + o + '</option>').appendTo('#FavStreet'); 
     }); 

     // Storing the values in Hidden fields 
     $storeInput.val(storeNumber); 
     $regionInput.val(regionID); 

     console.log('Address - ' + $favStreet.val() + 
        ' :: Store -' + $storeInput.val() + 
        ' :: Region - ' + $regionInput.val()); 
    }); 
}); 

Check Fiddle