如何更改jQuery Mobile Select菜单的颜色？ [英] How to change color of jQuery Mobile Select menu?
本文介绍了如何更改jQuery Mobile Select菜单的颜色？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在不影响同一类的其他元素的情况下动态更改jQuery Mobile中单个选择菜单的颜色（背景和文本）？
我尝试了几种方法，包括：
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});
和
$('#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!
推荐答案
你可以这样做：
<!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>
让我知道是否有帮助
这篇关于如何更改jQuery Mobile Select菜单的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
