How do i change the color of Dropdown menu on selecting an entry in JSF?

Question

This is a sample code:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
<script type="text/javascript" src="js/DataTable.js"></script>
<h:body>
<h:selectOneMenu value="test1"
styleClass="combobox" id="profileID"> 
<f:selectItem itemLabel="--Select--" itemValue="--Select--"/>
<f:selectItem itemLabel="Yes" itemValue="Yes"/>
<f:selectItem itemLabel="No" itemValue="No"/>
</h:selectOneMenu>
</h:body>
</ui:composition>

Now when i select an option, i want the minimized dropdown menu rectangle to change it's background color, highlighting the selected option.If i choose 'Yes', the rectangle should turn 'Green', if i select 'No', the rectangle should turn 'Red'. How can this be implemented?

Rayon · Accepted Answer · 2016-04-08T07:35:22.303

You can keep data-* attribute to store color value for selected option.

document.getElementById('cars').addEventListener('change', function() {
  var bgColor = this.options[this.options.selectedIndex].dataset.color;
  this.style.backgroundColor = bgColor;
  [].forEach.call(this.options, function(option) {
    option.style.backgroundColor = 'white'; //As options will inherit backgroundColor from parent `select`, do set it as `#fff` after every onchange
  });
  this.options[this.options.selectedIndex].style.backgroundColor = bgColor; //If you want selected color of `data-color`
});

<select id="cars">
  <option data-color="green" value="volvo">Volvo</option>
  <option data-color="green" value="saab">Saab</option>
  <option data-color="pink" value="opel">Opel</option>
  <option data-color="blue" value="audi">Audi</option>
</select>

I will mind answering this as it is not part of the question! Do edit your question and do provide parsed(browser readable) HTML. — Rayon, Apr 08 '16 at 07:39

Robert · Answer 2 · 2016-04-08T07:29:03.753

2

This should do it:

$('select').change(function(){
  if (this.value == 'volvo') {
    $(this).css('background','lime');
  }
  if (this.value == 'saab') {
    $(this).css('background','red');
  }
  if (this.value == 'opel') {
    $(this).css('background','blue');
  }
  if (this.value == 'audi') {
    $(this).css('background','yellow');
  }
});

option {
  background: #fff;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

edited Apr 08 '16 at 07:29

answered Apr 08 '16 at 07:13

Robert

426
1
4
11

`option` should not have any color I guess – Rayon Apr 08 '16 at 07:15
`$(this)` refers to the `select` – Robert Apr 08 '16 at 07:24
When did I say it does not! ;( – Rayon Apr 08 '16 at 07:24
the options dont get any color – Robert Apr 08 '16 at 07:25
Once `.css` is set, options inherit `background-color` from parent `select`.. Open select again and you will find it.. – Rayon Apr 08 '16 at 07:27
This works, but the color of the entire list gets changed when i select an option. – Manish Chawla Apr 08 '16 at 07:29
Now, if i wish to implement the same in jsf, using , what all changes do i need to make? : ` ` – Manish Chawla Apr 08 '16 at 07:34

score 0 · Answer 3 · answered Apr 08 '16 at 07:15

Do some jQuery and get the required behaviour.

$("body").on('change', 'select', function(){
            var val = $(this).val();
            if(val == 'volvo'){
                $(this).css("background-color", 'red');
            }
            if(val == 'saab'){
                $(this).css("background-color", 'green');
            }
        })

Pugazh · Answer 4 · 2016-04-08T07:16:39.137

-1

You can use option:checked to highlight the selected option.

the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes

Source: w3.org

option:checked {
  background-color: lightgreen;
}

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

edited Apr 08 '16 at 07:16

answered Apr 08 '16 at 07:11

Pugazh

9,453
5
33
54

This is select drop down not checkbox. – Divyesh Savaliya Apr 08 '16 at 07:13
@DivyeshSavaliya : `option:checked ` works even for drop down. Check the snippet above. – Pugazh Apr 08 '16 at 07:14
@Check the snippet – Pugazh Apr 08 '16 at 07:18
Still not working your demo..check robert code...it is working – Divyesh Savaliya Apr 08 '16 at 07:19

How do i change the color of Dropdown menu on selecting an entry in JSF?

4 Answers4