Display based on Option Selected

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

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

    <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. As they are either elite or not, you could also just use a single 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 {

Display based on Option Selected

Question

1 answers

solution1
0 ACCPTED 2014-09-20 18:57:37

Display based on Option Selected

Question

1 answers

solution1 0 ACCPTED 2014-09-20 18:57:37

solution1
0 ACCPTED 2014-09-20 18:57:37