根据选项选择显示

时间:2014-09-20 18:48:23

标签: javascript select option

以下是我根据他们是否选择了精英选项来显示内容的内容,但是代码不能正常工作,所以一些帮助修复它会很棒......

<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>

此处的实际内容显示了我们的排名,我无法编辑...我的选择是精英,所以如何根据选择的选项更改javascript =&#34;选择&# 34;

    <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>

1 个答案:

答案 0 :(得分:0)

您需要获取所选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 {