如何使用jQuery Mobile更改选择菜单选项的字体

Question

我目前有一个使用java脚本动态创建的选择菜单;

var rating = ["R","RR","RRR","RRRR","RRRRR"]; 
var SelectMenuBuild = '<select id="updateconditionselect">'; 

for (var i = 0; i < rating.length; i++) 
{ 
    SelectMenuBuild = SelectMenuBuild + "<option id='Condition' style='color: #eab92d; font-family: 'WebSymbolsRegular;' value='"+i+"'>"+rating[i]+"</option>"; 
}; 
SelectMenuBuild = SelectMenuBuild + "</option>"; 

现在我用的r领域选项的原因是，中的R字体系列WebSymbolsRegular，R代表一个明星。所以我基本上创建了一个从1到5的星星下拉菜单，唯一的问题是字体系列没有被应用到下拉菜单中。下拉菜单不断显示星星。我相信一些jQuery或jQuery Mobile如何覆盖这个功能，并且我确定如何让字体系列发挥作用。

通过改变上面的代码：

'<select id="updateconditionselect" style='color: #eab92d; font-family: 'WebSymbolsRegular;'>'; 

它似乎部分地工作。我现在得到以下内容：

无论如何让选择显示星而不是R？

Answer 1

尝试像，

var rating = ["R","RR","RRR","RRRR","RRRRR"]; 
var SelectMenuBuild = '<select id="updateconditionselect" style="color: #eab92d; font-family: WebSymbolsRegular;">'; 

for (var i = 0; i < rating.length; i++) 
{ 
    SelectMenuBuild = SelectMenuBuild + "<option value='"+i+"'>"+rating[i]+"</option>"; 
}; 
SelectMenuBuild = SelectMenuBuild + "</select>"; 

无需添加id在options，还添加style attribute到select不option。

Answer 2

工作的jsfiddle例如：所以它的内容可以用CSS来改变http://jsfiddle.net/Gajotres/sEP3Y/

第一个选择框中必须有一个ID。

比方说，这是一个选择框：

<div data-role="fieldcontain"> 
    <label for="select-choice-custom" class="select">Shipping method:</label> 
    <select name="select-choice-1" id="select-choice-custom" data-native-menu="false"> 
     <option value="standard">Standard: 7 day</option> 
     <option value="rush">Rush: 3 days</option> 
     <option value="express">Express: next day</option> 
     <option value="overnight">Overnight</option> 
    </select> 
</div> 

它的编号选择，选择定制。当jQuery Mobile创建一个选择框时，它会根据自定义元素创建它。其中有2个，其中一个是像自定义选择框那样的按钮，覆盖原始选择框。第二个元素是选项叠加。

这2个元素id从select id生成。基本上与ID #select-choice-custom选择框，将有2个新的元素#select-choice-custom-menu和#select-choice-custom-button。他们除了他们两个同名现在又增加了它的名字一个新的sulfix：-menu和​​3210。

下一步迫使新的字体类型的那些元素，它可以用这个CSS来实现：

#select-choice-custom-menu li div div a, #select-choice-custom-button .ui-btn-inner .ui-btn-text span { 
    font-family: Calibri,Arial !important; 
} 

这只是一个例子，使用的字体，而不是Calibri。