[英]Display based on Option Selected
这是我根据显示的内容(如果他们选择了elite选项)来汇总显示的内容,但是代码无法正常工作,因此一些帮助修复它的方法将非常有用...
<style>
.notelite{
display:none!important;
}
gotelite{
display:block!important;
}
</style>
<script language="javascript">
if(document.getElementById('profile_field_7_10').value == "4") {
document.getElementById('elitecontent').className="gotelite";
}
if(document.getElementById('profile_field_7_10').value == "1") {
document.getElementById('elitecontent').className="notelite";
}
if(document.getElementById('profile_field_7_10').value == "2") {
document.getElementById('elitecontent').className="notelite";
}
if(document.getElementById('profile_field_7_10').value == "3") {
document.getElementById('elitecontent').className="notelite";
}
if(document.getElementById('profile_field_7_10').value == "0") {
document.getElementById('elitecontent').className="notelite";
}
</script>
<span id="elitecontent" style="cursor:pointer;">Decor</span>
另外,这里是显示他们排名的实际内容,我无法编辑...我的被选为Elite,所以我如何根据选择的选项=“ selected”更改javascript?
<span id="your_div_id_level"><dd><div class="field_uneditable">Elite</div>
<div class="field_editable invisible"><select class="gensmall" id="profile_field_7_10" name="profile_field_7_10" size="1">
<option value="">No choice</option><option value="0">New Starter</option>
<option value="1">Junior</option>
<option value="2">Novice</option>
<option value="3">Pro</option
><option value="4" selected="selected">Elite</option></select></div></dd></span>
您需要获取所选option
的值,而不是整个select
的值。 由于他们不是精英人士,您也可以只使用一个if / else。
这应该更好。 该范围仅显示是否选择了精英:
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
.notelite {
display:none!important;
}
.gotelite {
display:block!important;
}
</style>
</head>
<body>
<span id="your_div_id_level"><dd><div class="field_uneditable">Elite</div>
<div class="field_editable invisible"><select class="gensmall" id="profile_field_7_10" name="profile_field_7_10" size="1">
<option value="">No choice</option><option value="0">New Starter</option>
<option value="1">Junior</option>
<option value="2">Novice</option>
<option value="3">Pro</option>
<option value="4" selected="selected">Elite</option></select></div></dd></span>
<span id="elitecontent" style="cursor:pointer;">Decor</span>
<script type='text/javascript'>
// get the select
var elem = document.getElementById('profile_field_7_10');
// get the value of the selected option
var value = elem.options[elem.selectedIndex].value;
// check if elite selected
if(value == "4") {
document.getElementById('elitecontent').className="gotelite";
}
else {
document.getElementById('elitecontent').className="notelite";
}
</script>
</body>
</html>
正如Axel在评论中所说,您还应该将css从gotelite {
更改为.gotelite {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.