0

我目前有一个使用 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 的原因是字体系列 WebSymbolsRegular 中的 R，R 代表一颗星。所以我基本上是在创建一个从 1 到 5 星的下拉菜单，唯一的问题是字体系列没有应用于下拉菜单。下拉菜单一直显示星星。我确定 jQuery 或 jQuery Mobile 是如何覆盖此功能的，并且我确定如何让字体系列正常工作。

通过更改上面的代码：

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

它似乎部分起作用。我现在得到以下信息：

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

4

2 回答 2

0

试试看，

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。

于 2013-07-02T10:08:54.200 回答
0

工作 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 创建一个选择框时，它会从自定义元素中创建它。其中有 2 个，一个是像自定义选择框一样的按钮，它覆盖了原始选择框。第二个元素是选项覆盖。

从选择 id 生成的那 2 个元素 id。基本上带有 id 的选择框#select-choice-custom将有 2 个新元素#select-choice-custom-menu和#select-choice-custom-button. 它们具有相同的名称，只是它们现在都在其名称中添加了一个新的 sulfix：-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.

于 2013-07-02T10:17:33.340 回答