Change background color based on dropdown

[NikkiC]

Hi there,

I have tabbed content on my page.  One of which looks like this:

 <li><a data-toggle="tab" href="#menu4" style="background-color: #10368F; color: white;">5. TEST RESULT</a></li>

I'd like to change the background color of this element to grey IF my dropdown (named [@Expected_Outcome]) equals Business Insight.  I know I can probably figure this out, but my brain is turning to mush from looking at this and I have a deadline looming!!  Can anyone help me write the correct script?

Many thanks

Nikki

[NikkiC]

I'm trying this but no good:

<select id="EditRecordExpected_Outcome">
  <option value="1">1</option>
  <option value="Business Insight">Business Insight</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<script>
var dropdown = document.getElementById("EditRecordExpected_Outcome");

if (dropdown.value === "Business Insight") {
    document.getElementById("result").style.backgroundColor = "black";
}
</script>

 <li><a data-toggle="tab" href="#menu4" id="result" style="background-color: #10368F; color: white;">5. TEST RESULT</a></li> 

 

[NikkiC]

OK, now got this after a bit more research, but still not working!!! Pleeease, anyone??

 <script>
var dropdown = document.getElementById("EditRecordExpected_Outcome");
var selectedValue = dropdown.options[dropdown.selectedIndex].text;

if (selectedValue === "Business Insight") {
    document.getElementById("result").style.backgroundColor = "black";
}
</script>

 

[NikkiC]

I've fixed it