Я нашел отличный код и подправил его, но теперь мне нужно добавить к нему, и я немного растерялся. Я все еще довольно новичок ie.
Первый выбор поднимает Имя двигателя, второй поднимает модели каждого двигателя. В настоящее время второй выбор перенаправит на указанную c страницу. Я хотел бы третий выбор на основе 2-го. Третий будет перечислять три типа файлов на выбор, и они будут ссылками: step, dwg и pdf.
Может кто-нибудь помочь мне добавить третий выбор, основанный на втором?
Вот ссылка на страницу в реальном времени: введите описание ссылки здесь и вот оригинальный код (спасибо человеку, который его создал!): введите описание ссылки здесь
Вот мой код:
<h3>Select Engine</h3>
<form action="" method="post" id="demoForm" class="demoForm">
<select name="category">
<option>
Select One
</option>
<option value="cat">
Caterpillar
</option>
<option value="cum">
Cummins
</option>
<option value="det">
Detroit Diesel - MTU
</option>
<option value="gen">
Generac
</option>
<option value="koh">
Kohler
</option>
</select>
<h4>Select Model</h4>
<select name="choices[]" id="choices" size="" onchange="javascript:location.href = this.value;">
<!-- js populates -->
</select>
</form>
<div style="padding-top:60px;padding-bottom:60px;">
<h2>
For
questions,
please
contact
<a href="Sales@inExhaust.com">Sales@inExhaust.com</a>
</h2>
</div>
<?php
<script type="text/javascript">
// removes all option elements in select list
// removeGrp (optional) boolean to remove optgroups
function removeAllOptions(sel, removeGrp) {
var len, groups, par;
if (removeGrp) {
groups = sel.getElementsByTagName('optgroup');
len = groups.length;
for (var i=len; i; i--) {
sel.removeChild( groups[i-1] );
}
}
len = sel.options.length;
for (var i=len; i; i--) {
par = sel.options[i-1].parentNode;
par.removeChild( sel.options[i-1] );
}
}
function appendDataToSelect(sel, obj) {
var f = document.createDocumentFragment();
var labels = [], group, opts;
function addOptions(obj) {
var f = document.createDocumentFragment();
var o;
for (var i=0, len=obj.text.length; i<len; i++) {
o = document.createElement('option');
o.appendChild( document.createTextNode( obj.text[i] ) );
if ( obj.value ) {
o.value = obj.value[i];
}
f.appendChild(o);
}
return f;
}
if ( obj.text ) {
opts = addOptions(obj);
f.appendChild(opts);
} else {
for ( var prop in obj ) {
if ( obj.hasOwnProperty(prop) ) {
labels.push(prop);
}
}
for (var i=0, len=labels.length; i<len; i++) {
group = document.createElement('optgroup');
group.label = labels[i];
f.appendChild(group);
opts = addOptions(obj[ labels[i] ] );
group.appendChild(opts);
}
}
sel.appendChild(f);
}
// anonymous function assigned to onchange event of controlling select list
document.forms['demoForm'].elements['category'].onchange = function(e) {
// name of associated select list
var relName = 'choices[]';
// reference to associated select list
var relList = this.form.elements[ relName ];
// get data from object literal based on selection in controlling select list (this.value)
var obj = Select_List_Data[ relName ][ this.value ];
// remove current option elements
removeAllOptions(relList, true);
// call function to add optgroup/option elements
// pass reference to associated select list and data for new options
appendDataToSelect(relList, obj);
};
// object literal holds data for optgroup/option elements
var Select_List_Data = {
// name of associated select list
'choices[]': {
// names match option values in controlling select list
cat: {
text: ['Select Model', 'C9', 'C15'],
value: ['#', '/sales', '/sales']
},
cum: {
text: ['DGDB - T1/6BTA5.9-G4', 'DSGAA - T3/QSB7-G7-NR3'],
value: ['/', '/']
},
det: {
text: ['DS200D6S/JD-6068HFG85', 'DS250D6S/6R1600G70'],
value: ['/', '/']
},
gen: {
text: ['SD080', 'SD100'],
value: ['/', '/']
},
koh: {
text: ['REOZJB/6135HFG84', '500REOZVC/Volvo TAD1642GE'],
value: ['/', '/']
}
}
};
// populate associated select list when page loads
window.onload = function() {
var form = document.forms['demoForm'];
// reference to controlling select list
var sel = form.elements['category'];
sel.selectedIndex = 0;
// name of associated select list
var relName = 'choices[]';
// reference to associated select list
var rel = form.elements[ relName ];
// get data for associated select list passing its name
// and value of selected in controlling select list
var data = Select_List_Data[ relName ][ sel.value ];
// add options to associated select list
appendDataToSelect(rel, data);
};
</script>