Я пытаюсь отобразить различные формы на основе значения выбранного выпадающего списка. У меня почти все работает, хотя кажется, что когда два значения отображают одну и ту же форму, это дает мне ошибку.Javascript: пытается показать различные формы, основанные на выпадающем значении?
Вот the jsfiddle
И код:
HTML:
<select id="C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown" name="form_select">
<option value="">-- Select an Option --</option>
<option value="Buy A Product">Buy A Product</option>
<option value="Support">Support</option>
<option value="Ask A Question">Ask A Question</option>
<option value="Literature Request">Literature Request</option>
<option value="AE Account">A&E Account</option>
</select>
<div id="C006_ctl00_ctl00_C006">Zip Code</div>
<div id="C007_ctl00_ctl00_C001">Support</div>
<div id="C008_ctl00_ctl00_C003">Ask A Question</div>
<div id="C009_ctl00_ctl00_formControls">Brochures</div>
<div id="C012_ctl00_ctl00_formControls">A&E Account Header</div>
<div id="C013_ctl00_ctl00_formControls">Literature Header</div>
<div id="C010_ctl00_ctl00_formControls">Street Address</div>
<div id="C006_ctl00_ctl00_C008">Product Interest</div>
CSS:
#C006_ctl00_ctl00_C006{display:none;}
#C006_ctl00_ctl00_C008{display:none;}
#C007_ctl00_ctl00_C001{display:none;}
#C008_ctl00_ctl00_C003{display:none;}
#C009_ctl00_ctl00_formControls{display:none;}
#C010_ctl00_ctl00_formControls{display:none;}
#C013_ctl00_ctl00_formControls{display:none;}
#C012_ctl00_ctl00_formControls{display:none;}
Javascript:
document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('change', function() {
var style = this.value == "Buy A Product" ? 'block' : 'none';
document.getElementById('C006_ctl00_ctl00_C006').style.display = style;
document.getElementById('C006_ctl00_ctl00_C008').style.display = style;
});
document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('change', function() {
var style = this.value == "Support" ? 'block' : 'none';
document.getElementById('C007_ctl00_ctl00_C001').style.display = style;
});
document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('change', function() {
var style = this.value == "Ask A Question" ? 'block' : 'none';
document.getElementById('C008_ctl00_ctl00_C003').style.display = style;
});
document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('change', function() {
var style = this.value == "Literature Request" ? 'block' : 'none';
document.getElementById('C010_ctl00_ctl00_formControls').style.display = style;
document.getElementById('C009_ctl00_ctl00_formControls').style.display = style;
});
document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('change', function() {
var style = this.value == "AE Account" ? 'block' : 'none';
document.getElementById('C012_ctl00_ctl00_formControls').style.display = style;
document.getElementById('C010_ctl00_ctl00_formControls').style.display = style;
});
Поэтому, когда выбрано «Литературный запрос», он должен отображать брошюры и уличный адрес. Когда выбрана A & E Учетная запись должна указывать «A & E Заголовок учетной записи» и «Уличный адрес». Оба должны отображать «Уличный адрес», хотя только A & E Учетная запись показывает адрес улицы. Кто-нибудь знает, почему? Я не так уж фантастичен в javascript ... и прошу прощения за ужасные идентификационные имена. Они были автоматически предоставлены, и я не изменил их.
Это работает почти полностью, кроме как по какой-то причине идентификатор для «поддержки». Поддержка продолжает отображаться для остальных выпадающих вариантов после того, как я выберет, чтобы показать «поддержку». Но это только для этого div, что странно. Я, возможно, смогу понять это, хотя .. спасибо! – user3802315
Это странная вещь, ничего с идентификатором для «поддержки» не будет работать. Я не уверен, что это только делает это со мной: http://jsfiddle.net/miiicheellee/Dzd2w/ Если я использую другой идентификатор, а не тот, для поддержки, он работает. В противном случае «поддержка» липкая. Очень странно. – user3802315
Это закончилось тем, что отлично работает - спасибо! – user3802315