How can I modify the color of a jQuery Mobile Select menu?

Question

How can I modify the color of a jQuery Mobile Select menu?

Is there a way to dynamically modify the color (background and text) of a single select menu in jQuery Mobile, without impacting other elements with the same class? I've experimented with various approaches, such as:

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

and

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

I have also attempted to include a refresh afterwards without success:

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

I am aiming to change the color depending on the selected value, therefore I am inserting the code within the change event of the select menu like this

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

Below is my HTML structure:

<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 assistance in changing the text or background color would be greatly appreciated!

jquery html css jquery-mobile

Answer 1

Answer №1

Will this code be effective?

$("#choice").on("click", function(event, ui) {
    $(this).parent().attr('data-theme','f');
    $('#choice').selectmenu('update');
});

Answer 2

Will this code be effective?

$("#choice").on("click", function(event, ui) {
    $(this).parent().attr('data-theme','f');
    $('#choice').selectmenu('update');
});

Answer 3

Answer №2

If you want to achieve this, follow these steps:

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

Feel free to ask if you need further assistance.

Answer 4

If you want to achieve this, follow these steps:

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

Feel free to ask if you need further assistance.

How can I modify the color of a jQuery Mobile Select menu?

Answer №1

Answer №2

Similar questions

When a 404 error occurs in jQuery ajax, the ajaxStop event is not triggered

The draggable functionality on jqgrid is not functioning properly after pagination

Having trouble incorporating a variable into a jQuery selector

What is the process for initiating printing in a separate window?

Scriptmanager and Rokbox clash in a heated confrontation

What causes the unset width or height to impact object-fit, and is there a workaround for this issue?

The Kendu UI Tabsbstrip views are experiencing issues with loading jquery validation

The jqGrid is not showing the AJAX JSON data as expected

(Reactjs) Steps to automate submission of file upon selection

Add a preventDefault event listener to a submit button that triggers a specific function

Slideshow through each item using Typescript and Angular8

Guide on linking draggable elements

Adding space between the heading and the text underneath by placing a margin between h2

Transform a section of text into JSON format to utilize in DataTables

Clones are made sortable instead of arranging them in a specific order

Embrace the presence of null values on the client side

Create a copy of a div element once the value of a select element has

What could be causing a react element to fail to update?

When exporting data from Datatable to Excel, decimal values including the % symbol may experience rounding issues

What is preventing this from retrieving the source code?