使用不同的值填充下拉列表

时间:2014-03-20 04:01:09

标签: javascript php jquery 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": "ABC", "email": "xyz2@example.com", "sms": 543 } ] } }

我有这样的JSON数据。我想在PHP或Javascript中解析这个JSON,以便在三个下拉列表中填充它们。

名称|电子邮件| SMS

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

到目前为止,我刚刚创建了下拉列表。

小提琴链接http://jsfiddle.net/CAB2z/

示例:

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

3 个答案:

答案 0 :(得分:1)

它将返回您想要的所有结果。只需在下拉列表中附加值即可。

var resultArray = r.Result.tags;

var unique = {};
var distinctName = [];
var email = [];
var sms = [];

for( var i in resultArray ){
 if( typeof(unique[resultArray[i].name]) == "undefined"){
  distinctName.push(resultArray[i].name);  // push the unique names into the array

 }
 unique[resultArray[i].name] = 0;
     email.push(resultArray[i].email);  // push the email into the array
     sms.push(resultArray[i].sms)       // push the sms into the array
}

console.log(distinctName);
console.log(email);
console.log(sms);

答案 1 :(得分: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

答案 2 :(得分:0)

在JavaScript中,使用jQuery,您可以:

var names, emails, smses;

(function() {
  data = JSON.parse(data); // Get the data formatted.
  var result = {
    name:  {},
    email: {},
    sms:   {}
  };
  $.each(data.Result.tags, function(index, value) {
    result.name [value.name]  = true; // True won't be used, it can be any value.
    result.email[value.email] = true;
    result.sms  [value.sms]   = true
  });
  names  = Object.keys(result.name);
  emails = Object.keys(result.email);
  smses  = Object.keys(result.sms);
} ()); // Temporary variables (like result) are destroyed.
// names, emails and smses contain your data.