[英]JavaScript - Show / Hide Div based on form selection (postback)
我有一個用來更新數據庫中現有信息集的表格。 在其中有一個選擇框,當選擇選項“ B”時,它將顯示一個隱藏的部分,而在選項“ A”中,將隱藏該部分。 這很好。
但是,當我從數據庫加載記錄集並將選擇框設置為選項“ B”以顯示隱藏的div時,它不會顯示。
這是因為我使用“ onchange”切換了DIV標簽。
如何在記錄集加載時讓JS正確顯示DIV標簽? 目前,要查看數據,我必須在兩個選項之間切換選擇框。
我對JS幾乎一無所知,下面的JS不是我的,我希望獲得一些幫助。
謝謝
<!--- show / hide DIV based on select --->
<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenDiv";
}
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleDiv";
lastDiv = divName;
}
}
//-->
</script>
<style type="text/css" media="screen"><!--
.hiddenDiv {
display: none;
}
.visibleDiv {
display: block;
border: 0px grey solid;
}
--></style>
<!--- end DIV hide --->
--------------snip----------
<select name="ad_i" id="ad_i" onchange="showDiv(this.value);">
<option value="in" <? echo $adtypea; ?> >Option A </option>
<option value="ba" <? echo $adtypeb; ?> >Option B</option>
</select>
<!--- start hiding DIV --->
<div class="hiddenDiv" id="ba">
<br /><br />Coding for Ad<br />
<select name="ad_type" id="ad_type">
<option value="html" <? echo $codestylea; ?> >HTML</option>
<option value="adsense"<? echo $codestylef; ?>>Adsense / Other JavaScript Code</option>
<option value="img" default="default" <? echo $codestyleb; ?>>Image</option>
<option value="swf" <? echo $codestylec; ?>>Flash</option>
</select>
</div>
<!--- end Div for hidden--->
呈現選擇框和div之后,您要顯示/隱藏調用:
<script type="text/javascript">
var selectbox = document.getElementById("ad_i");
showDiv(selectbox.options[selectbox.selectedIndex].value);
</script>
所以我認為應該
<!--- end Div for hidden--->
<script type="text/javascript">
$(document).ready(function(){
$('#bl_cat').on('change', function() {
if ( this.value == 'vid')
//.....................^.......
{
$("#dis-vid").show();
$("#dis-img").hide();
}
else
{
$("#dis-img").show();
$("#dis-vid").hide();
}
});
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.