輸出對象數組javascript

Question

我通過解決創建包含保險公司的下拉菜單的任務，然後第二個下拉菜單顯示保險公司提供的保險類型，財產，車隊或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>"); 
    } 
}); 

目前它正確顯示保險公司名單。然後選擇變更後的公司。我需要它然後顯示它提供的保險類型（忽略那些它dosn't（那些沒有數字），然後在該選擇顯示在＃保險號碼的數字。

因此，以演示如果我選擇Allianz，第二個下拉列表將包含'property'和'fleet'。如果用戶選擇'fleet'，則編號'0800 587 5858'將被附加到div＃insurance-number'。

對不起，如果這很混淆我真的需要一些幫助，這就是一切。

Answer 1

要訪問對象屬性使用類似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(); 

Answer 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; 
}; 

UPDATE：您需要在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] 
}