CODEWITHSUNDEEP
javascript
alkhader
alkhader

Reputation: 998

Highlight a select option using javascript

I have a group list as select like that:

<select id="groups">

<option value="g1">G1</option>
<option value="g2">G2</option>
<option value="g3">G3</option>

</select>

I have a contact list which basically contains:

Name = group
============
Casper  G1-G2-G3
Andy    G1-G2
Mark    G2-G3

When the user check the checkbox for Casperand click Edit button so G1-G2 and G3 should be highlighted (Selected) in the group list. When I get the value of the group field in the contact list, all of the three groups come with comma "G1-G2-G3". Your help is highly appreciated. Thanks,

Upvotes: 0

Views: 3022

Answers (3)

Bergi
Bergi

Reputation: 665546

OK, so I guess there is a checkbox for Casper that when clicked calls the following function:

function(groupstring) {
// groupstring is something like "G1-G2"

    var groups = groupstring.split("-");
    var options = document.getElementById("groups").options;
    for (var i=0; i<options.length; i++) {
        var opt = options[i];
        opt.defaultSelected = groups.indexOf(opt.value) > -1;
    }
}

I'm not sure whether you want to use the selected or the defaultSelected property. Note that your select should have multiple set to true (<select id="groups" multiple>).

Upvotes: 1

xiaowl
xiaowl

Reputation: 5217

Some tips, I believe it's good for you to solve this problem yourself ;)

  • Seems that Casper belongs to multiple groups, so you should set multiple="true" to your select

  • When you check Casper, retrieve the group data associated with him, say ["g1", "g2", "g3"]. Loop over this list, and set each option with the value to selected.

  • If you want to support IE6, you need also add a class, say selected to the selected option.

  • The CSS rule { option.selected: background: yellow} will do the trick.

  • If you only target on modern browser, option[selected]{ xxx } works well.

Upvotes: 1

Vince Lowe
Vince Lowe

Reputation: 3630

You could make the edit button assign the selected attribute to the options then use css to style it.

option[selected] { background: #f00; }

Upvotes: 1

Related Questions