CODEWITHSUNDEEP
javascripthtmlcss
Fatima Eman
Fatima Eman

Reputation: 27

Change background color when specific option selected

I want when "Park Here" clicked it outer area should be red and when "Cancel" clicked it should be green but it shows inner color red and green. Is there any method which change background color to red and green. code is here

<tbody>
  <tr>
       <td bgcolor="green" align="center" ><select name="place1"  >
       <option onclick="this.parentNode.style.backgroundColor='red' "> Park Here</option>
       <option onclick="this.parentNode.style.backgroundColor='green' "> Cancel </option>
       </select></td>

  </tr>
  </tbody>

Here is output but I want outer color should be red or green like what this tag done. IS there any method? Please tell me I want outer color should be red on click not inner enter image description here

Upvotes: 0

Views: 5643

Answers (3)

Fatima Eman
Fatima Eman

Reputation: 27

This code work fro me. My problem solved Thank You +Rajesh Jangid 

<select id="select" onchange="this.parentNode.style.backgroundColor = this.value">
  <option value='red'>Park here</option>
  <option value='green'>Cancel</option>
</select>

Upvotes: 0

prasanth
prasanth

Reputation: 22490

Apply with your color into value of option.Then its will apply with javascript

function changing(that){
 var colors = document.getElementById('select').value;
 
that.parentNode.style.backgroundColor =colors
  
  }
<tbody>
  <tr>
       <td bgcolor="green" align="center" ><select id="select" name="place1"  onchange="changing(this)">
         <option value=""> select</option>
       <option value="red"> Park Here</option>
       <option value="green"> Cancel </option>
       </select></td>

  </tr>
  </tbody>

Upvotes: 1

Lars Anundsk&#229;s
Lars Anundsk&#229;s

Reputation: 1355

You need to use the onchange event on the select node. option will not respond to an onclick event.

Give your select an id so that you can select it by document.getElementById("yourId") inside the function.

<script>
  setColor = function(val) {
     var e = document.getElementById("mySelect");
     document.body.style.backgroundColor = e.options[e.selectedIndex].value;
  }
</script>

<select id="mySelect" onchange="setColor()">
    <option value"red">Red</option>
    <option value="green">Green </option>
</select>

Upvotes: 1

Related Questions