Make a drop down option bold or blue or both using JavaScript

Posted on 2005-03-18
Medium Priority
Last Modified: 2012-08-14
Because I don't know how to make the default option bold or blue, I used the word "(Default)" at the end of it, and this works, but it would look so much nicer if it were either bold or blue.
Here's my code:

     arrOptions[0].text = arrOptions[0].text + " (Default)";
     //arrOptions[0].text = arrOptions[0].text.style.color = "blue";
     //arrOptions[0].text = arrOptions[0].text.font-style = "bold";
I cannot use HTML, I need the code to be in JavaScript, so I can include it in the if statement above.  Can anyone help me, make the default option (the first option) for my drop down menus (there's about 15 of them) be bold, or the color blue?  That way it will stand out...  I only need this default option to be bold, that way when they click the arrow to select an option they know right away which one was the default option.  This is very important, so important that if I cannot figure it out, I have to add the word ("Default") at the end.  But this takes up a lot of space, it stretches out the drop down menu which barely fits on the page as it is (becasue they're aligned one next to the other)...
It would be a great help if you could help me out with this.  I already asked this question like 3 times, but everyone is replying on how to do this using HTML, but that doesn't help me...It's because I'm not using HTML to code this, I'm just embdding it in my JavaScript:
Here's the rest of my code(I'm inluding this to show you why I cannot use HTML):

for(j = 0; j < arrOptions.length; ++j)

dselected = "selected='true'"
} else if((pvalue != "*") && (pvalue != "z")){
arrOptions[arrOptions.length-1].text = pvalue;
arrOptions[arrOptions.length-1].value = pvalue;

var firstDefaultVal = arrOptions[0].value;

arrOptions[0].text = arrOptions[0].text + " (Default)";

strOption = strOption + "<option "+dselected+" value='"+ arrOptions[j].value + "'>"+ arrOptions[j].text + "</option>"+ vbCRLF;

dselected = "";

var psize= "1";
if(iname.length>3) psize=iname.substring(3,iname.length)+"";

i_properties = "<table><tr><td><span id = 'dst'><input type=hidden name='hiddst|"+pname +"' value='"+ pname+ "'><select" + styleclassName +" size='"+ psize +"'  name='" + pname + "' id='" + pname + "'>" +  strOption + " </select></span></td><br>";

i_properties += "<td><input type='BUTTON' name='btnAdd' id='btnAdd' onClick = 'javascript:addOption("+"\""+pname+"\""+");'  value='&nbsp;Add&nbsp;' style = 'display : block; background : #CCCCCC; border-width : 1px; border-color : #000000; FONT-SIZE: 9pt; FONT-WEIGHT: bold; FONT-FAMILY: sans-serif; CURSOR: hand;'></td>";

i_properties += "</tr></table>";
Question by:Angie532
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
  • 2
LVL 25

Expert Comment

ID: 13576475
try this
arrOptions[0].text = arrOptions[0].text + " (Default)";
arrOptions[0].style.color = "blue";

Author Comment

ID: 13577364
Didn't work.  
LVL 31

Accepted Solution

GwynforWeb earned 2000 total points
ID: 13577445
<select size="1" id="sel">
  <option value="0">Text1 </option>
  <option value="11">Text2 </option>
  <option value="92">Text3 </option>
  <option value="53">Text4 </option>
 document.getElementById('sel').options[0].text+=" (default)"

Author Comment

ID: 13578109
It worked only I have like 15 drop down menus, now I have to put this in a loop...But thank you...One part of it is working...

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 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