我通过解决我创建包含保险公司的下拉列表的任务有点方法,然后是第二个下拉列表,显示保险公司提供的保险类型,例如财产,车队或者motortrade(提供的保险类型包括一个数字)。)一旦选择了两个选择下拉列表,显示相关的数字。
目前我已经感谢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中的数字。
因此,如果我选择了安联,那么第二次下拉将包含“财产”和“车队”。如果用户选择'fleet',则会将数字'0800 587 5858'附加到div#insurance-number'。
抱歉,如果这令人困惑,我真的需要一些帮助。答案 0 :(得分: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]
}
答案 1 :(得分:0)
要访问对象属性,请使用myArray[index].property
这是访问对象属性“name”的DEMO。
如果要输出整个对象,请将(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();