[英]Select dropdown onchange show div
我有一個選擇/選項下拉菜單,當用戶更改選項時,應該在里面顯示一個帶有說明的ap標記。 未選擇的選項的所有說明都不應顯示。 為運行該功能而編寫的Javascript確實有效,但我認為它編寫得並不正確或效率很高。
我放置選擇/選項的表格是由WordPress Contact Form 7插件生成的。 在某些瀏覽器中選擇了表單的“提交”按鈕后,即可正確提交。 在其他瀏覽器中則沒有。 有人告訴我它不在Chrome 33.0.1750.146和IE8中提交。 Firefox也有問題,盡管我不確定哪個版本。 當我刪除Javascript時,該表單在所有瀏覽器中都可以正常運行。 我還嘗試過從WordPress插件中刪除表單,然后手動編寫並使用PHP處理。 此選項未正確提交,或者使我認為問題出在我糟糕的Javascript上。
我不太了解Javascript或Jquery,所以這是我的代碼,如果有人可以幫助,我將不勝感激!
function servicechangeinfo(){
var servicesonchange = document.getElementById('servicesonchange');
servicesonchange.onchange = changeHandler;
function changeHandler(){
var servicesonchange = document.getElementById('servicesonchange');
if(servicesonchange.value === "Pest Inspection") {
PestInspection.style.display = 'block';
placeholder.style.display = 'none';
} else {
PestInspection.style.display = 'none';
}
if(servicesonchange.value === "Economy Plus Package") {
EconomyPlusPackage.style.display = 'block';
placeholder.style.display = 'none';
} else {
EconomyPlusPackage.style.display = 'none';
}
if(servicesonchange.value === "Economy Package") {
EconomyPackage.style.display = 'block';
placeholder.style.display = 'none';
} else {
EconomyPackage.style.display = 'none';
}
if(servicesonchange.value === "Gas Line Leak Test") {
GasLineLeakTest.style.display = 'block';
placeholder.style.display = 'none';
} else {
GasLineLeakTest.style.display = 'none';
}
if(servicesonchange.value === "Ultimate Saver Package") {
UltimateSaverPackage.style.display = 'block';
placeholder.style.display = 'none';
} else {
UltimateSaverPackage.style.display = 'none';
}
if(servicesonchange.value === "Super Saver Package") {
SuperSaverPackage.style.display = 'block';
placeholder.style.display = 'none';
} else {
SuperSaverPackage.style.display = 'none';
}
if(servicesonchange.value === "Home Inspection") {
homeinspection.style.display = 'block';
placeholder.style.display = 'none';
} else {
homeinspection.style.display = 'none';
}
if(servicesonchange.value === "Radon Testing") {
RadonTesting.style.display = 'block';
placeholder.style.display = 'none';
} else {
RadonTesting.style.display = 'none';
}
if(servicesonchange.value === "Septic Inspection") {
SepticInspection.style.display = 'block';
placeholder.style.display = 'none';
} else {
SepticInspection.style.display = 'none';
}
if(servicesonchange.value === "Total Coliform Bacteria Analysis") {
TotalColiformBacteriaAnalysis.style.display = 'block';
placeholder.style.display = 'none';
} else {
TotalColiformBacteriaAnalysis.style.display = 'none';
}
if(servicesonchange.value === "FHA Water Series Analysis") {
FHAWaterSeriesAnalysis.style.display = 'block';
placeholder.style.display = 'none';
} else {
FHAWaterSeriesAnalysis.style.display = 'none';
}
if(servicesonchange.value === "VA Water Series Analysis") {
VAWaterSeriesAnalysis.style.display = 'block';
placeholder.style.display = 'none';
} else {
VAWaterSeriesAnalysis.style.display = 'none';
}
}
}
window.onload = servicechangeinfo;
<select id="servicesonchange" class="wpcf7-form-control wpcf7-select margintop20" aria-invalid="false" name="Services">
<option value="">---</option><option value="Super Saver Package">Super Saver Package</option>
<option value="Ultimate Saver Package">Ultimate Saver Package</option>
<option value="Economy Plus Package">Economy Plus Package</option>
<option value="Economy Package">Economy Package</option>
<option value="Home Inspection">Home Inspection</option>
<option value="Pest Inspection">Pest Inspection</option>
<option value="Radon Testing">Radon Testing</option>
<option value="Septic Inspection">Septic Inspection</option>
<option value="Total Coliform Bacteria Analysis">Total Coliform Bacteria Analysis</option>
<option value="FHA Water Series Analysis">FHA Water Series Analysis</option>
<option value="VA Water Series Analysis">VA Water Series Analysis</option>
<option value="Gas Line Leak Test">Gas Line Leak Test</option>
</select>
<p id="placeholder"></p>
<p id="homeinspection"></p>
<p id="RadonTesting"></p>
<p id="SepticInspection"></p>
<p id="TotalColiformBacteriaAnalysis"></p>
<p id="FHAWaterSeriesAnalysis"></p>
<p id="VAWaterSeriesAnalysis"></p>
<p id="GasLineLeakTest"></p>
<p id="UltimateSaverPackage"></p>
<p id="SuperSaverPackage"></p>
<p id="EconomyPlusPackage"></p>
<p id="EconomyPackage"></p>
<p id="PestInspection"></p>
這個簡化版怎么樣
的HTML
<select id="servicesonchange" class="wpcf7-form-control wpcf7-select margintop20" aria-invalid="false" name="Services">
<option value="">---</option><option value="Super Saver Package">Super Saver Package</option>
<option value="Ultimate Saver Package">Ultimate Saver Package</option>
<option value="Economy Plus Package">Economy Plus Package</option>
<option value="Economy Package">Economy Package</option>
<option value="Home Inspection">Home Inspection</option>
<option value="Pest Inspection">Pest Inspection</option>
<option value="Radon Testing">Radon Testing</option>
<option value="Septic Inspection">Septic Inspection</option>
<option value="Total Coliform Bacteria Analysis">Total Coliform Bacteria Analysis</option>
<option value="FHA Water Series Analysis">FHA Water Series Analysis</option>
<option value="VA Water Series Analysis">VA Water Series Analysis</option>
<option value="Gas Line Leak Test">Gas Line Leak Test</option>
</select>
<p id="HomeInspection">home inspection 1</p>
<p id="RadonTesting">Radon Testing</p>
<p id="SepticInspection">Septic Inspection</p>
<p id="TotalColiformBacteriaAnalysis">Total Coliform Bacteria Analysis</p>
<p id="FHAWaterSeriesAnalysis">FHA Water Series Analysis</p>
<p id="VAWaterSeriesAnalysis">VA Wate rSeries Analysis</p>
<p id="GasLineLeakTest">GasLine Leak Test</p>
<p id="UltimateSaverPackage">Ultimate Saver Package</p>
<p id="SuperSaverPackage">Super Saver Package</p>
<p id="EconomyPlusPackage">Economy Plus Package</p>
<p id="EconomyPackage">Economy Package</p>
<p id="PestInspection">Pest Inspection </p>
jQuery查詢
//hide all p's (better in css)
$('p').hide();
//when dropdown changes
$('#servicesonchange').on('change', function(){
//get a reference to this
$this = $(this);
//hide all the exposed p's
$('p').hide();
//put the select text in the placeholder p
$('#placeholder').show().text($this.val());
//replace all spaces in the dropdown value and show the element that matches
$('#' + $this.val().replace(/ /gi, '')).show();
});
好吧,我在您的JavaScript代碼中注意到了
分配
var servicesonchange = document.getElementById('servicesonchange');
而且您對P標簽的操作也不盡相同。
因為根據您的代碼,您正在將樣式分配給未定義的對象。
即PestInspection.style.display ='block';
Should really be something like:
var _pestInspection = document.getElementById('pestInspection');
_pestInspection.style.Display = "block";
還注意到window.onload = servicechangeinfo; 這意味着您正在頁面加載時運行代碼,這可能是導致代碼被忽略的另一個原因。 您可能需要通過將OnClick事件添加到下拉列表中來執行此操作。
<select id="servicesonchange" onClick="servicechangeinfo()" class="wpcf7-form-control wpcf7-select margintop20" aria-invalid="false" name="Services">
這將執行您的代碼。
我建議您使用Google Chrome開發工具,因為這將使您可以觀察控制台是否存在javascript錯誤,並且還可以調試代碼。
Sico建議了一種JQuery解決方案(很好),但是我認為您需要先調試代碼(理解它),如果未顯示錯誤,則可能會提供更多信息,例如,占位符是什么?沒有為其分配元素,或其他任何東西,但您嘗試為其分配CSS樣式。
希望這可以幫助您指出正確的方向。 享受編碼!
庫什
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.