根据选择的选项显示

Question

Here's what I have put together to display content based on if they have the elite option selected, but the code isnt working right so some help fixing it would be great... 这是我根据显示的内容（如果他们选择了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>

Also here is the actual content that shows their rank, which I can't edit... Mine is selected as Elite so how do i change the javascript based on which option is selected="selected"? 另外，这里是显示他们排名的实际内容，我无法编辑...我的被选为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>

Answer 1

You need to get the value of the selected option , not the select as a whole. 您需要获取所选option的值，而不是整个select的值。 As they are either elite or not, you could also just use a single if/else. 由于他们不是精英人士，您也可以只使用一个if / else。

This should work better. 这应该更好。 The span only shows if elite is selected: 该范围仅显示是否选择了精英：

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

As Axel said in the comment, you should also change the css from gotelite { to .gotelite { 正如Axel在评论中所说，您还应该将css从gotelite {更改为.gotelite {

根据选择的选项显示

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-09-20 18:57:37

根据选择的选项显示

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-09-20 18:57:37

解决方案1
0 已采纳 2014-09-20 18:57:37