Hi I have a 2 level combo box script that is working perfectly. However what I like to do is make one line of this data color. As I am very new to javascript I would appreciate a little bit of help from our expert colleagues. basically what the code does is present an original option of a few lines then based on the option chosen from the list another set of options get presented to the user. The main (the first) part of the list is: var category=new Array() category[0]=new Option("Select type ", "") //THIS LINE RESERVED TO CONTAIN COMBO TITLE category[1]=new Option("Metric (MOD)", "combo1") category[2]=new Option("Imperial (DP)", "combo2") category[3]=new Option("Technical Request", "combo3") Code (markup): what I like to do is make the text "Technical Request" appear as red (say). Please let me know if you would like more of the javascript coding, if it will help you. thanks in advance
Hi, can be enough - category[3].style.color="red"; ?? That changes the font color. You can put it into the code after the option is selected. But there's a little weird thing on FF (at least 2 has it) that the color is not visible until you open the option list. So I'm not sure it really helps...
Hi Thanks for your reply. I replaced category[3] with category[3].style.color="red" but unfortunately that did not work. Am I doing anything wrong. Thanks.
No, sorry, I didn't mean replace it. I meant add as a new line into the code. First you create new option and then set the color : category[3]=new Option("Technical Request", "combo3") category[3].style.color="red"
You have not posted enough code for anybody to accurately help you. It would probably be helpful to see the entirety of the Option function, as there may be a way to alter that to allow style settings within the arguments when a new Option is created.
Hi Thanks for your email. here is the entire javascript code: <form name="dynamiccombo"> <select name="stage2" size="1" onChange="displaysub()"> <option value="#">This is a place Holder text </option> <option value="#">This is a Place Holder text </option> <option value="#">This is a Place Holder text </option> <option value="#">This is a Place Holder text </option> </select> <input type="hidden" name="test" value="Go!" onClick="gothere()"> </form> <script> <!-- //2-level combo box script- by javascriptkit.com //Visit JavaScript Kit (http://javascriptkit.com) for script //Credit must stay intact for use //STEP 1 of 2: DEFINE the main category links below //EXTEND array as needed following the laid out structure //BE sure to preserve the first line, as it's used to display main title var category=new Array() category[0]=new Option("Select type ", "") //THIS LINE RESERVED TO CONTAIN COMBO TITLE category[1]=new Option("Metric (MOD)", "combo1") category[2]=new Option("Imperial (DP)", "combo2") category[3]=new Option("Technical Request", "combo3") category[3].style.color="red" //STEP 2 of 2: DEFINE the sub category links below //EXTEND array as needed following the laid out structure //BE sure to preserve the LAST line, as it's used to display submain title var combo1=new Array() combo1[0]=new Option("Select size","") combo1[1]=new Option("0.25, 0.3 mod","../newpdf/download.php?file=double_spur_gears_0.25_0.3mod.pdf") combo1[2]=new Option("0.4 mod","../newpdf/download.php?file=double_spur_gears_0.4mod.pdf") combo1[3]=new Option("0.5, 0.8 mod","../newpdf/download.php?file=double_spur_gears_0.5_0.8mod.pdf") combo1[4]=new Option("1.0, 1.25 mod","../newpdf/download.php?file=double_spur_gears_1.0_1.25mod.pdf") combo1[5]=new Option("1.5, 2.0 mod","../newpdf/download.php?file=double_spur_gears_1.5_2.0mod.pdf") combo1[6]=new Option("2.5, 3.0 mod","../newpdf/download.php?file=double_spur_gears_2.5_3.0mod.pdf") combo1[7]=new Option("Back to types","") //THIS LINE RESERVED TO CONTAIN COMBO SUBTITLE var combo2=new Array() combo2[0]=new Option("Select size","") combo2[1]=new Option("96, 72 dp","../newpdf/download.php?file=double_spur_gears_96_72dp.pdf") combo2[2]=new Option("64 dp","../newpdf/download.php?file=double_spur_gears_64dp.pdf") combo2[3]=new Option("48, 32 dp","../newpdf/download.php?file=double_spur_gears_48_32dp.pdf") combo2[4]=new Option("24, 20 dp","../newpdf/download.php?file=double_spur_gears_24_20dp.pdf") combo2[5]=new Option("16, 12 dp","../newpdf/download.php?file=double_spur_gears_16_12dp.pdf") combo2[6]=new Option("10, 8 dp","../newpdf/download.php?file=double_spur_gears_10_8dp.pdf") combo2[7]=new Option("Back to types","") //THIS LINE RESERVED TO CONTAIN COMBO SUBTITLE var combo3=new Array() combo3[0]=new Option("Select from list below","") combo3[1]=new Option("Technical Request Form","../newpdf/download.php?file=double_gears_technical_request.pdf") combo3[2]=new Option("Back to types","") //THIS LINE RESERVED TO CONTAIN COMBO SUBTITLE var curlevel=1 var cacheobj=document.dynamiccombo.stage2 function populate(x){ for (m=cacheobj.options.length-1;m>0;m--) cacheobj.options[m]=null selectedarray=eval(x) for (i=0;i<selectedarray.length;i++) cacheobj.options[i]=new Option(selectedarray[i].text,selectedarray[i].value) cacheobj.options[0].selected=true } function displaysub(){ if (curlevel==1){ populate(cacheobj.options[cacheobj.selectedIndex].value) curlevel=2 } else gothere() } function gothere(){ if (curlevel==2){ if (cacheobj.selectedIndex==cacheobj.options.length-1){ curlevel=1 populate(category) } else location=cacheobj.options[cacheobj.selectedIndex].value } } //SHOW categories by default populate(category) //--> </script> Code (markup):
Hi, thanks for the code. As I wrote - "You can put it into the code after the option is selected....", it represents in your case function populate(x), so when you're filling the select with options you need to set the color there. As you defined the color above together with array of options you can use it like : for (i=0;i<selectedarray.length;i++) { cacheobj.options=new Option(selectedarray.text,selectedarray.value) cacheobj.options.style.color=selectedarray.style.color; }
Hi I tried that but still no good. What's more, it won't let me go back and forth from 2nd stage back to 1st, to see all the options. Thx
Hi, weird, I can... Just to be sure everything is the same as you have, just the function populate will be different. function populate(x){ for (m=cacheobj.options.length-1;m>0;m--) cacheobj.options[m]=null selectedarray=eval(x) for (i=0;i<selectedarray.length;i++) { cacheobj.options=new Option(selectedarray.text,selectedarray.value) cacheobj.options.style.color=selectedarray.style.color; } cacheobj.options[0].selected=true } Still doesn't work?
Hi lp1051 The function works fine now, but the colour of the text , in the technical request' is still NOT red. Any more ideas plz? happy new year
Hi jacka, don't know what's wrong then. Go here - http://lp1051.co.cc/dp/option.html - can you see the option in red there?? I tested on IE, FF. If you can see it there, something has to be wrong in your own code. I used completely the source you provided, so if you 'View Source' and use it, it must work fine on your page too. Happy new year to you too
Hi Thanks for getting back to me and taking the trouble of testing the code. One thing I should have mentioned is that I am using Mac osx (version 10.5.6 , latest). I have tested it on PC explorer and it indeed shows in red , the way it is supposed to show. Any ideas what alterations I can make to work on Mac? thanks again.