如何使用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。