Javascript 级联下拉列表，通过<；选项>；作为ID的值

我一直在使用以下解决方案构建基于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)
    });
});

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

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

问题是：如何将该id传递到

值

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)
    });
});

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

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

返回“”+lcn+“”

文本和值的

map（）

callbak函数有两个参数。更改

map（）

如下所示

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

---

文本和值的

map（）

callbak函数有两个参数。更改

map（）

如下所示

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

---

按如下方式构建对象更具自定义性：

{ 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(''); 

---

按如下方式构建对象更具自定义性：

{ 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(''); 

---

在数组中使用标准化的对象结构，而不是将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('');

“西班牙”：[
{id:4，城市：'巴塞罗那'}，
{id:15，城市：'马德里'}，
{id:21，城市：'Marabella'}
]
var html=$.map（LCN，函数（项）{
返回“”+item.city+“”
}).加入（“”）；

在数组中使用标准化的对象结构，而不是将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('');

“西班牙”：[
{id:4，城市：'巴塞罗那'}，
{id:15，城市：'马德里'}，
{id:21，城市：'Marabella'}
]
var html=$.map（LCN，函数（项）{
返回“”+item.city+“”
}).加入（“”）；

我喜欢这个解决方案！然而，在我的例子中，我使用了Azim的解决方案：一个数组是由一个PHP循环动态构建的，实际上我和任何其他程序员在将来都不会碰它。只需对该PHP循环进行一些小的调整，就可以改变这种结构。请注意，您创建的结果对象没有显示顺序，无法排序或过滤，而true javascript数组可以。true，无法排序，但再次声明：我使用PHP循环按需要的顺序放置数组项-数组只是一组PHP计算等的最终结果。我已经说过，我将根据您的建议重新执行PHP输出：）谢谢！你一直称它为数组。。。。因为javascript不像php那样有关联数组……它变成了一个javascript对象，不像这个解决方案那样有关联数组！然而，在我的例子中，我使用了Azim的解决方案：一个数组是由一个PHP循环动态构建的，实际上我和任何其他程序员在将来都不会碰它。只需对该PHP循环进行一些小的调整，就可以改变这种结构。请注意，您创建的结果对象没有显示顺序，无法排序或过滤，而true javascript数组可以。true，无法排序，但再次声明：我使用PHP循环按需要的顺序放置数组项-数组只是一组PHP计算等的最终结果。我已经说过，我将根据您的建议重新执行PHP输出：）谢谢！你一直称它为数组。。。。因为javascript不像php那样有关联数组……它变成了一个javascript对象而不是数组