Question

I am trying to write some code that unbolds every item in an HTML select box and then bolds the player’s name. It only works if I have an alert box in between lines, like so:

$("#users > option").css("font-weight", "normal");
alert('AHAHSDYHSAUDHSAUDHSAUDH');           
$('#users option[value="' + strPlayer + '"]').css("font-weight", "bold");

If I remove the alert box the player item doesn’t become bolded. My only guess is that JQuery operations are asynchronous.. Not sure how to solve this one.

Thanks.

Answer 1

Why not use CSS for the first part (setting all to non-bold), and jQuery for the last part (setting the user’s name to bold). It’s better to apply default, predictable styles using CSS rules, and then customize using jQuery:

<style type="text/css">
#users > option {font-weight:normal;}
</style>
<script type="text/javascript">
$('#users option[value="' + strPlayer + '"]').css("font-weight", "bold");
</script>

---

Edit:

If the overlap of the two statements is conflicting, try removing the overlap:

$('#users option:not([value="' + strPlayer + '"])').css("font-weight", "normal");
$('#users option[value="' + strPlayer + '"]').css("font-weight", "bold");