Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


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
  • 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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

571 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