对象的输出数组

Question

在解决创建包含保险公司的下拉菜单的任务时，我还有一点办法，然后是第二个下拉菜单，显示保险公司提供的保险类型，例如财产，车队或汽车贸易（提供的保险类型包括一个数字）。已选择下拉菜单，显示相关编号。

目前，这是我对以下http://codepen.io/anon/pen/yoEiL下的一些帮助所提供的帮助

以下是HTML：

<form action="" method="get" class="insurance-numbers">
  <div>
    <select id="company">

    </select>
  </div>
  <div>
    <select id="insurance-type">

    </select>
  </div>
  <div id="insurance-number"></div>
</form>

和Javascript：

var insurancecompanies = [
  { 
    name : 'Advent', 
    property : '01242 674 674', 
    fleet : '', 
    motortrade : ''
  },
  {   name : 'Allianz', 
   property : '0844 412 9988', 
   fleet : '0800 587 5858', 
   motortrade : '' 
  },
  {   name : 'Aviva', 
   property : '0800 015 1498', 
   fleet : '0800 246 876', 
   motortrade : '0800 246 876'
  },
  {   name : 'AXA', 
   property : '0870 900 0867', 
   fleet : '0870 900 0860', 
   motortrade : '0870 900 1753'
  },
  {   name : 'Catlin', 
   property : '', 
   fleet : '0800 066 5364', 
   motortrade : ''
  },
  {   name : 'Chartis', 
   property : '', 
   fleet : '0844 477 6544', 
   motortrade : ''
  },
  {   name : 'Clegg Gifford', 
   property : '', 
   fleet : '', 
   motortrade : '01708 729 529'
  },
  {   name : 'Equity Red Star', 
   property : '', 
   fleet : '0845 609 1235', 
   motortrade : ''
  },
  {   name : 'Highway/LV', 
   property : '', 
   fleet : '0845 373 1244', 
   motortrade : ''
  },
  {   name : 'NIG', 
   property : '', 
   fleet : '0845 300 4644', 
   motortrade : '0845 300 4644'
  },
  {   name : 'QBE', 
   property : '', 
   fleet : '01245 272 700', 
   motortrade : ''
  },
  {   name : 'Royal Sun Alliance', 
   property : '0845 077 0120', 
   fleet : '0845 675 0404', 
   motortrade : '0845 077 0119' 
  },
  {   name : 'Summit', 
   property : '', 
   fleet : '01254 396 655', 
   motortrade : ''
  },
  {   name : 'Zurich', 
   property : '0845 300 2055', 
   fleet : '0800 300 2055', 
   motortrade : ''
  }
];


function findCompany(name) {
  var i = 0, len = insurancecompanies.length;
  for (i; i < len; i += 1) {
    if (insurancecompanies[i].name === name) {
      return insurancecompanies[i];
    }
  }
  return null;
};

var dropdown = [], i = 0, len = insurancecompanies.length;
for (i; i < len; i += 1) {
  dropdown.push(insurancecompanies[i].name);
}

$.each( dropdown, function( i, val ) {
  $("#company").append( "<option val=\""+ val +"\">" + val + "</option>" );
});

$('#company').on('change', function() {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    var selectedInsurance = findCompany(valueSelected);
    for (i in selectedInsurance) {
      $("#insurance-type").append( "<option val=\""+ selectedInsurance[i] +"\">" + selectedInsurance[i] + "</option>" );
    }
});

目前，它正确显示了保险公司列表。 然后，它选择更改时选择的公司。 我需要它来显示它提供的保险类型（忽略它不提供的保险类型（没有数字的保险），然后在选择时在div＃insurance-number中显示数字。

因此，如果我选择了安联来演示，第二个下拉列表将包含“属性”和“舰队”。 如果用户选择“舰队”，则数字“ 0800 587 5858”将附加到div＃insurance-number'上。

很抱歉，如果这令人困惑，我真的需要一些帮助。

Answer 1

如果要基于数组中每个对象的name属性创建选项的下拉列表，则可以执行以下操作：

var dropdown = [], i = 0, len = insurancecompanies.length;
for (i; i < len; i += 1) {
  dropdown.push(insurancecompanies[i].name);
}

使用dropdown填充您的选择。 然后使用选定的选项并遍历它，在数组中找到相应的对象：

function findCompany(name) {
  var i = 0, len = insurancecompanies.length;
  for (i; i < len; i += 1) {
    if (insurancecompanies[i].name === name) {
      return insurancecompanies[i];
    }
  }
  return null;
};

更新 ：您需要在选择的company上添加change事件。 进行更改时，应用findCompany(selectedOption) ，然后填充第二个选择，但是除了迭代数组之外，您将不得不或多或少地迭代对象属性，如下所示：

var selectedInsurance = findCompany(selectedOption); // selectedOption is the value of the first select 

for (i in selectedInsurance) {
  // here add to your dropdown selectedInsurance[i]
}

Answer 2

要访问对象属性，请使用诸如myArray[index].property类的东西

这是访问对象属性“名称”的DEMO 。

如果要输出整个对象，请使用console.log(insurancecompanies[i])替换(insurancecompanies[i].name) ，并查看控制台日志。

要使用javascript填充选择菜单，请使用以下波纹管DEMO

var insurancecompanies = [
{ 
    name : 'Advent', 
    property : '01242 674 674', 
    fleet : '', 
    motortrade : ''
},
{   name : 'Allianz', 
    property : '0844 412 9988', 
    fleet : '0800 587 5858', 
    motortrade : ''
},
{   name : 'Aviva', 
    property : '0800 015 1498', 
    fleet : '0800 246 876', 
    motortrade : '0800 246 876'
},
{   name : 'AXA', 
    property : '0870 900 0867', 
    fleet : '0870 900 0860', 
    motortrade : '0870 900 1753'
},
{   name : 'Catlin', 
    property : '', 
    fleet : '0800 066 5364', 
    motortrade : ''
},
{   name : 'Chartis', 
    property : '', 
    fleet : '0844 477 6544', 
    motortrade : ''
},
{   name : 'Clegg Gifford', 
    property : '', 
    fleet : '', 
    motortrade : '01708 729 529'
},
{   name : 'Equity Red Star', 
    property : '', 
    fleet : '0845 609 1235', 
    motortrade : ''
},
{   name : 'Highway/LV', 
    property : '', 
    fleet : '0845 373 1244', 
    motortrade : ''
},
{   name : 'NIG', 
    property : '', 
    fleet : '0845 300 4644', 
    motortrade : '0845 300 4644'
},
{   name : 'QBE', 
    property : '', 
    fleet : '01245 272 700', 
    motortrade : ''
},
{   name : 'Royal Sun Alliance', 
    property : '0845 077 0120', 
    fleet : '0845 675 0404', 
    motortrade : '0845 077 0119'
},
{   name : 'Summit', 
    property : '', 
    fleet : '01254 396 655', 
    motortrade : ''
},
{   name : 'Zurich', 
    property : '0845 300 2055', 
    fleet : '0800 300 2055', 
    motortrade : ''
}
];

function foo() {

   select = document.getElementById('foo');

   for (var i=0; i<insurancecompanies.length; i++){
      var opt = document.createElement('option');
      opt.innerHTML = insurancecompanies[i].name;
      select.appendChild(opt);
   }

}

foo();