Question

我一直在使用此处LINK找到的解决方案构建基于jQuery的级联下拉列表：使用Javascript：

jQuery(function($) {
    var locations = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
        'Spain': ['Barcelona'],
        ...
    }

    var $locations = $('#location');
    $('#country').change(function () {
        var country = $(this).val(), lcns = locations[country] || [];

        var html = $.map(lcns, function(lcn) {
            return '<option value="' + lcn + '">' + lcn + '</option>'
        }).join('');

        $locations.html(html)
    });
});

这很好用，但是我需要传递城市的ID，而不是城市名称本身。我已经弄明白了如何为一个值添加一个键（当涉及到JS时，我比noob更少）：

使用Javascript：

var locations = {
    'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
    'Spain': { 4 : 'Barcelona', 15 : 'Madrid', 21 : 'Marabella'],
    ...
}

问题是：如何将该ID传递到<option>值...？

使用Javascript：

return '<option value="' + lcn + '">' + lcn + '</option>'

Answer 1

map() callbak函数有两个参数用于text＆amp;值。更改您的map()，如下所示。

var html = $.map(lcns, function (text, val) {
    return '<option value="' + val + '">' + text + '</option>'
}).join('');

你的对象是错的。上次]应为}

'Spain': { 4 : 'Barcelona', 15 : 'Madrid', 21 : 'Marabella'],
//---------------------------------------------------------^----

Answer 2

在数组中使用标准化对象结构，而不是使用id作为对象的键。它更容易阅读，并且数组通常更容易用于重复结构

'Spain': [

    {  id: 4,  city: 'Barcelona' }, 
    {  id: 15, city: 'Madrid' }, 
    {  id: 21, city: 'Marabella' }

]

var html = $.map(lcns, function( item) {
        return '<option value="' + item.id + '">' + item.city + '</option>'
}).join('');

Answer 3

构建对象更自定义如下：

{ id: 1, city: 'Duesseldorf' };

如果你愿意，你可以这样做：

var locations = {
    'Germany': [
    {id: 1, city: 'Duesseldorf'}, {id: 2, city: 'Leinfelden'}]
}; 

var lcns = locations['Germany']; //Just an example 

$.map(lcns, function(lcn) {
    console.log(lcn.id); 
    console.log(lcn.city); 
    return '<option value="' + lcn.id + '">' + lcn.city + '</option>'
}).join('');

https://jsfiddle.net/npjdfn0y/2/

我可能还建议将您的对象更改为一系列国家/地区：

[
    { id: 1, country: 'Germany', cities: [
        { id: 1, city: 'Duesseldorf'}, { id: 2, city: 'Leinfelden' }
    ]}, 
    { id: 2, country: 'Spain', cities: [ 
        { id: 11, city: 'Barcelona' }, { id: 12, city: 'Madrid' }
    ]}
];

级联下拉列表，将<option>值作为ID传递

3 个答案: