1
我試圖根據所選下拉列表的值顯示不同的表單。我已經掌握了幾乎所有的工作，雖然它似乎是兩個值都顯示相同的形式，它給了我一個錯誤。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帳戶顯示街道地址。有誰知道爲什麼？我在JavaScript上並不是那麼棒......我爲可怕的ID名稱道歉。他們自動得到，我沒有改變他們。
除了某些原因，「支持」的ID以外幾乎完全可行。在我選擇顯示「支持」後，支持繼續顯示其餘的下拉選擇。但這只是爲了這個div，這很奇怪。雖然我可能會弄清楚..謝謝！ – user3802315
這是最奇怪的事情，任何與'支持'的ID都不起作用。我不確定它是否只對我這麼做：http://jsfiddle.net/miiicheellee/Dzd2w/ 如果我使用不同的ID而不是'support'，那麼它就可以工作。否則'支持'是粘性的。很奇怪。 – user3802315
這結束了工作完美 - 謝謝你！ – user3802315