如何使用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示例：http://jsfiddle.net/Gajotres/sEP3Y/

第一个选择框必须具有ID，以便可以使用CSS更改其内容。

让我们说这是一个选择框：

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

它有一个id＃select-choice-custom。当jQuery Mobile创建一个选择框时，它会从自定义元素创建它。其中有两个，一个是按钮，如自定义选择框，覆盖原始选择框。第二个元素是选项覆盖。

从select id生成的那两个元素id。基本上，ID #select-choice-custom 的选择框将包含2个新元素 #select-choice-custom-menu 和 #select-choice-custom-button 。它们具有相同的名称，但它们现在都在其名称中添加了新的linix： -menu 和 -button 。

下一步是在这些元素上强制使用新的字体类型，可以使用此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 。