如何更改jQuery Mobile Select菜单的颜色？

Question

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? 如何在jQuery Mobile中动态更改单个选择菜单的颜色（背景和文本），而又不影响同一类的其他元素？ 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 我正在尝试根据所选值更改颜色，因此将代码放置在选择菜单的change事件中，如下所示

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

My HTML is as follows: 我的HTML如下：

<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! 感谢您对更改文本颜色或背景颜色的任何帮助！

Answer 1

Does something like this work? 这样的事情行吗？

$("#select").live("change", function(event, ui) {
    $(this).parent().attr('data-theme','e');
    $('#select').selectmenu('refresh');
});

Answer 2

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 让我知道是否有帮助

如何更改jQuery Mobile Select菜单的颜色？

问题描述

2 个解决方案

解决方案1
4 2012-02-02 14:43:56

解决方案2
2 已采纳 2012-02-02 16:22:17

如何更改jQuery Mobile Select菜单的颜色？

问题描述

2 个解决方案

解决方案1 4 2012-02-02 14:43:56

解决方案2 2 已采纳 2012-02-02 16:22:17

解决方案1
4 2012-02-02 14:43:56

解决方案2
2 已采纳 2012-02-02 16:22:17