当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to change color of jQuery Mobile Select menu?

问题描述:

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!

网友答案:

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

网友答案:

Does something like this work?

$("#select").live("change", function(event, ui) {
    $(this).parent().attr('data-theme','e');
    $('#select').selectmenu('refresh');
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: