按照json中的ID填充下拉列表

时间:2017-08-23 19:23:52

标签: json

我有一个JSON文件。最初它看起来像这样:

{"marki": [
        { "name": "Access", "models": [ "Max", "Acce" ] },
        { "name": "Adly", "models": [ "Adly1", "Adly2" ] }]
}

不幸的是,这是一件坏事,因为模型名称会重复出现。所以我为每个模型添加了一个ID。我从Wordpress数据库获得的ID。 我做了一个这样的JSON:

{"marki": [
            { "name": "Access",  "models": [ { "name":"Max", "id": 6206}, { "name":"Acce", "id": 6207} ] },
            { "name": "Adly", "models": [ { "name":"Adly1", "id": 6208}, { "name":"Adly2", "id": 6209} ] }]
}

为此,我有一个JS文件:

jQuery(document).ready(function($){
    var marki = {};
    var json = $.getJSON( wpp.uploads_dir + '/motocykle-marki.json');
    json.done(function(data){
        $.each(data.marki, function (index, marka){
            marki[marka.name] = marka.models;
        });
        console.log(marki);
    });
    $(document).on( 'change', '[data-wpt-field-title~="motocykle-marka"]', function(){
        var selected_model = $(this).find(":selected").text();
        $('[data-wpt-field-title~="motocykle-model"] > option').each(function(){
            if( $.inArray( $(this).text(), marki[selected_model]) == -1 ){
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    });
});

这个JS被写入原始的JSON版本,现在我不知道如何将它转换为新版本。现在第二个下拉列表没有显示任何内容。

版------------------------------------------- ------

这是问题的解决方案:

jQuery(document).ready(function($){

    var marki = {};
    var json = $.getJSON( wpp.uploads_dir + '/motocykle-marki.json');

    json.done(function(data){
        $.each(data.marki, function (index, marka){
            marki[marka.name] = marka.models;
        });
        console.log(marki);
    });

    $(document).on('change', '[data-wpt-field-title~="motocykle-marka"]', function () {
     $('[data-wpt-field-title~="motocykle-model"] > option').hide();

     var selected_model = $(this).find(":selected").text();
     var models = marki[selected_model];
     for (var i in models) {
      var model = models[i];

      $('[data-wpt-field-title~="motocykle-model"] > option[value="' + model.id + '"]').show();
     }
    });

});

1 个答案:

答案 0 :(得分:0)

替换此行:

if( $.inArray( $(this).text(), marki[selected_model]) == -1 ){

使用:

if( $.inArray( $(this).text(), marki[selected_model].map(function(a){return a.name;})) == -1 ){