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