0

我稍微完成了创建包含保险公司的下拉列表的任务，然后是第二个下拉列表，显示保险公司提供的保险类型，例如财产、车队或汽车贸易（提供的保险类型包括一个数字）。）一旦两者都选择已选择的下拉菜单显示相关数字。

目前，这要感谢以下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 中的数字。

因此，如果我选择了 Allianz，那么为了演示，第二个下拉列表将包含“property”和“fleet”。如果用户选择“fleet”，数字“0800 587 5858”将被附加到 div#insurance-number'。

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

4

2 回答 2

2

如果要根据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;
};

更新：您需要change在选择上添加一个事件company。在更改时，应用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]
}
于 2013-10-31T22:00:47.490 回答
0

要访问对象属性，请使用类似myArray[index].property

这是一个访问对象属性“名称”的演示。

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

要使用 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();
于 2013-10-31T21:53:26.967 回答