Color coding options in a select pulldown list

See attached .js file.

Note that on lines 55 - 57, if there has been a background color specified for that option, it is applied.

This works as coded in Firefox; in Chrome NO background color is shown.

Why?

Thanks

function showHint(str) {
	gstr = str;
	ml = 3;
	if (document.getElementById("n").checked) {
		ml = 5;
	}
	if (document.getElementById("w").checked) {
		ml = 6;
	}	
	if (str.length<ml) {
		document.getElementById("cnms").options.length = 0;
		return;
	}
	document.getElementById("cnms").options.length = 0;
	var xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			name_array=xmlhttp.responseText;
			if (name_array != "") {
				cnames = name_array.split(",");
				nr = cnames.length;
				var x = document.getElementById("cnms");
				for (i = 0; i < nr; i++) {
					tname = cnames[i];
					bgc = get_bgcolor(tname);
					ln = tname.length;
					bgcl = "";
					if (bgc != "") {
						tname = tname.substr(3,ln-3);
						if (bgc == 'r') {
							bgcl = "background-color:red;";
						}
						if (bgc == 'g') {
							bgcl = "background-color:green;";
						}
						if (bgc == 'y') {
							bgcl = "background-color:yellow;";
						}
						if (bgc == 'p') {
							bgcl = "background-color:#800080;";
						}
					}	
					cnum = tname.substr(0,5);
					ln = tname.length;
					tname = tname.substr(5,ln-5);
					var opt = document.createElement('option');
					opt.text = tname.replace("&#39;", "'");
					opt.value = cnum;
					if (cid != 0) {
						if (cid == cnum) {
							opt.selected = true;
							document.getElementById("cnms").selectedIndex = i;
						}
					}		
					if(bgcl != "") {
						opt.style=bgcl;
					}
					x.appendChild(opt);	
				}	
			}
		}

	}
	var timestamp = new Date();
	qstr = encodeURIComponent(str);
	if (document.getElementById("c").checked) {
		xmlhttp.open("GET","get_cname1.php?q="+qstr,true);
	}
	if (document.getElementById("a").checked) {
		xmlhttp.open("GET","get_addrn.php?q="+str,true);
	}
	if (document.getElementById("p").checked) {
		xmlhttp.open("GET","get_phonen.php?q="+str,true);
	}	
	if (document.getElementById("m").checked) {
		xmlhttp.open("GET","get_commentsn.php?q="+qstr,true);
	}
	if (document.getElementById("n").checked) {
		xmlhttp.open("GET","get_cnumbern.php?q="+str,true);
	}
	if (document.getElementById("w").checked) {
		xmlhttp.open("GET","get_wonumn.php?q="+str,true);
	}
	if (document.getElementById("e").checked) {
		xmlhttp.open("GET","get_emailn.php?q="+str,true);
	}	
	xmlhttp.send();
}

Open in new window

showhint.js
Richard KortsAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
Need to set it as inline style

opt.setAttribute('style', bgcl);

Open in new window

Styling dropdowns cross browser is a PITA
0
 
leakim971PluritechnicianCommented:
replace :
if(bgcl != "") {
						opt.style=bgcl;
					}

Open in new window

by :
if(bgcl != "") {
       var array_bgcl = bgcl.split(":");
var styl = array_bgcl[0];
var val = array_bgcl[1];
						opt.style[styl] = val;
					}

Open in new window


or use two vars from the beggining, one for the style key one for the value
0
 
Richard KortsAuthor Commented:
I tried that; no difference.

Works in Firefox, NOT in Chrome.

Thanks
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Richard KortsAuthor Commented:
Does not work in Safari under ios on the iPad either.
0
 
leakim971PluritechnicianCommented:
please provide a link to your page or post your xmlhttp.responseText
your html and css
0
 
Richard KortsAuthor Commented:
Excellent
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.