javascript - 采用不同的值来填充下拉列表

Question

   { "Result": { "tags": [ { "name": "ABC", "email": "abc1@example.com", "sms": 123 }, { 
"name": "ABC", "email": "abc2@example.com", "sms": 456 }, { "name": "ABC", "email": 
"abc3@example.com", "sms": 789 }, { "name": "XYZ", "email": "xyz1@example.com", "sms": 976 
}, { "name": "ABC", "email": "xyz2@example.com", "sms": 543 } ] } }

我有这样的 JSON 数据。我想用 PHP 或 Javascript 解析此 JSON，以将它们填充到三个下拉菜单中。

姓名 |电子邮件 |短信

但我需要在下拉列表中填充不同的名称，并根据选择的名称填充电子邮件和短信。

到目前为止，我刚刚创建了下拉菜单。

fiddle 链接:http://jsfiddle.net/CAB2z/

示例:

名称应包含:ABC | XYZ 仅一次(不同:不应重复相同的值)。 当我们选择 ABC 时，JSON 中“ABC”的三个电子邮件和电话号码应填充在第二个和第三个下拉列表中。

Answer 1

试试这个，

$(function(){
    var json = {
        "Result": {
            "tags": [{"name": "ABC","email": "abc1@example.com","sms": 123},
            {"name": "ABC","email": "abc2@example.com","sms": 456},
            {"name": "ABC","email":"abc3@example.com","sms": 789},
            {"name": "XYZ","email": "xyz1@example.com","sms": 976},
            {"name": "XYZ","email": "xyz2@example.com","sms": 543}]
         }
    };

    var name = [],obj = {};
    $(json.Result.tags).each(function (k, v) {
        name[k] = (v.name);
        obj[k] = {name: v.name,email: v.email,sms: v.sms};
    });
    $($.unique(name)).each(function (i, v) {
        $('#name').append('<option value="'+v+'">'+v+'</option>');
    });
    $('#name').on('change', function () {
       var $that = $(this);
       $('#email').html('');$('#sms').html('');
       $.each(obj,function (i, v) {
          if( $that.val() == v.name) {
             $('#email').append('<option value="'+v.email+'">'+v.email+'</option>');
             $('#sms').append('<option value="'+v.sms+'">'+v.sms+'</option>');
          }
       });
    }).change();
});

Live Demo