Home/ Questions/Q 7404337
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:14:30+00:00

How do I dynamically change the color (background and text) of a single select

  • 0

How do I dynamically change the color (background and text) of a single select menu in jQuery Mobile, without affecting other elements of the same class?
I’ve tried several ways, including:

$('#select').css({color:#000});

and 

$('#select').removeClass('ui-btn-up-a').addClass('custom-class');

I’ve also tried adding a refresh after it to no avail:

$('#select').selectmenu('refresh');

I’m trying to change the color based on the selected value, so I’m placing the code within the change event of the select menu like so

$("#select").live("change", function(event, ui) {
    ...
}

My HTML is as follows:

<select name="select" id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Any help on changing the text color or background color is appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do this in this way:

    <!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script>
  $("#page").live("pagecreate",function(){

        $("#select1").live( "change", function(event, ui) {
            switch($("#select1").val()){
                case "1":
                    $("#fc .ui-select .ui-btn-up-c").removeClass('green red black').addClass('blue');
                    break;
                case "2":
                    $("#fc .ui-select .ui-btn-up-c").removeClass('blue red black').addClass('green');
                    break;
                case "3":
                    $("#fc .ui-select .ui-btn-up-c").removeClass('green blue black').addClass('red');
                    break;
                case "4":
                    $("#fc .ui-select .ui-btn-up-c").removeClass('green red blue').addClass('black');
                    break;
            }
        });

        $( "#select1" ).selectmenu({
            create: function(event, ui){ 
                $("#fc .ui-select .ui-btn-up-c").addClass('blue');
            }
        });

  });
</script>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style>

 .blue{
    color:blue;
    background:cyan;
 }
 .green{
    color:green;
    background:coral;
 }
 .red{
    color:red;
    background:ivory;
 }
 .black{
    color:black;
    background:lavender;
 }
 </style>
</head> 
<body> 

<div data-role="page" id="page">


    <div data-role="content">   

<div data-role="fieldcontain" id="fc">
   <select name="select1" id="select1">
      <option value="1">Blue</option>
      <option value="2">Green</option>
      <option value="3">Red</option>
      <option value="4">Black</option>
   </select>
</div>
    </div><!-- /content -->
</div><!-- /page -->

</body>
</html>

    Let me know if that helps

    • 0