保険会社を含むドロップダウンを作成し、保険会社が提供する保険の種類 (たとえば、財産、フリート、モータートレードなど) を示す 2 つ目のドロップダウンを作成するという私のタスクを解決する方法を少し説明しました (提供される保険の種類には数字が含まれます)。ドロップダウンが選択されていると、関連する番号が表示されます。
現時点では、これは私が持っている限りですhttp://jsfiddle.net/3MK3D/
HTMLは次のとおりです。
<form action="" method="get" class="insurance-numbers">
<div>
<select id="company">
<option value="default-company">Choose a company</option>
</select>
</div>
<div>
<select id="insurance-type">
<option value="default-type">Choose an insurance type</option>
</select>
</div>
<div id="insurance-number"></div>
</form>
CSS:
#insurance-type {
display:none;
}
そして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;
};
function addInsuranceType(type) {
if (type !== '') {
$("#insurance-type").append('<option val="' + type + '">' + type + '</option>');
}
}
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;
if(valueSelected !== 'default-company') {
$('#insurance-type').children().remove();
$('#insurance-number').text('');
var selectedInsurance = findCompany(valueSelected);
addInsuranceType(selectedInsurance.property, 'Property');
addInsuranceType(selectedInsurance.fleet, 'Fleet');
addInsuranceType(selectedInsurance.motortrade, 'motor trade');
$('#insurance-type').fadeIn();
} else {
$('#insurance-type').fadeOut();
$('#insurance-number').fadeOut();
}
});
$('#insurance-type').on('change', function() {
var optionSelected = $("option:selected", this);
var insuranceSelected = this.value;
$('#insurance-number').text(insuranceSelected);
$('#insurance-number').fadeIn();
});
現時点では、保険会社のリストを正しく表示しています。次に、変更時に選択された会社を選択します。次に、保険会社が提供する番号を表示します。これらの番号のキー名を表示し、選択したキー(選択)に応じて番号を出力する必要があります。
したがって、アリアンツを選択したかどうかを示すために、2 番目のドロップダウンには「プロパティ」と「フリート」が含まれます。ユーザーが「フリート」を選択した場合、番号「0800 587 5858」が div#insurance-number に追加されます。
これが混乱している場合は申し訳ありませんが、これについて本当に助けが必要です。