Solved

Color coding options in a select pulldown list

Posted on 2014-07-25
6
186 Views
Last Modified: 2014-07-26
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
0
Comment
Question by:Richard Korts
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40220656
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
 

Author Comment

by:Richard Korts
ID: 40220660
I tried that; no difference.

Works in Firefox, NOT in Chrome.

Thanks
0
 

Author Comment

by:Richard Korts
ID: 40220665
Does not work in Safari under ios on the iPad either.
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 82

Expert Comment

by:leakim971
ID: 40220680
please provide a link to your page or post your xmlhttp.responseText
your html and css
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40220698
Need to set it as inline style

opt.setAttribute('style', bgcl);

Open in new window

Styling dropdowns cross browser is a PITA
0
 

Author Closing Comment

by:Richard Korts
ID: 40221510
Excellent
0

Featured Post

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remaiā€¦
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question