在 jEditable 中设置选择列表元素的样式答案

【问题标题】：Style the select list element in jEditable在 jEditable 中设置选择列表元素的样式
【发布时间】：2010-08-13 14:30:58
【问题描述】：

如何设置选择列表元素的样式？这是我现在的代码......

$('.editableSelect').editable(function(value, settings) {
    if (this.revert == value) {
        this.reset();
        return;
    }
    setSaveButtonRed(this);
    setDescFromAccountCode(this, value);
    return (value);
}, {
    type: 'select',
    submit: '<button type="submit" class="checkbookButton">OK</button>',
    data: $('#accountCodesForSelect').val(),
    cssclass: 'checkbookSelect',
    //style: 'font-family: Verdana,Helvetica,Sans-Serif; font-size:0.75em; width:700px;',
    tooltip: "Click to edit...."
});

类 checkbookSelect 看起来像这样......

.checkbookSelect
{
    font-family:Verdana,Helvetica,Sans-Serif;
    font-size:0.75em;
}

但是当我点击，在这种情况下，表格单元格（和 jEditable 触发）和选择列表出现，它没有样式...

我认为 jEditable 中的 cssclass 设置仅适用于 jEditable 创建的跨度，并且可能不适用于它创建的任何输入元素......所以也许答案是使用更具体的 jQuery 选择器和/还是 jQuery 的 live() 方法来选择选择列表元素，然后以这种方式应用样式？

请注意，我也尝试使用样式属性/设置...上面已将其注释掉。

顺便说一句 jEditable 是一个很棒的脚本...我已经写过关于如何设置 datepicker 和 jEditable here...

【问题讨论】：

看到这个时您使用的是哪个浏览器？
IE8...和 Firefox 3.whatever6?...有趣的是页面上的其他选择列表确实接受样式...我只是设置字体和字体大小.. .我知道选择列表不会响应 IE 中的所有样式设置。

标签： jquery jeditable

【解决方案1】：

cssclass: 'checkbookSelect' 将应用于标签表单。

所以你的 CSS 中的 .checkbookSelect select 而不是 .checkbookSelect 应该可以完成这项工作。

【讨论】：

【解决方案2】：

能够通过将此行添加到 jquery.jeditable.js 附近的版本 1.7.1 的第 270 行左右来设置下拉列表样式...可能并不重要确切的行号，但我把它放在那里因为那是脚本作者检查设置的地方。选择

$('select').addClass(settings.cssclass);

我确定选择器也可以调整...但至少现在可以使用...我稍后会收紧它，但以防其他人有同样的问题...只是想让你知道我是如何让它工作的

我已经将选择器改进为这个...

$(form).children('select').addClass(settings.cssclass);

现在效果好多了...

【讨论】：

【解决方案3】：

另一种方法是将所有元素设置为 width:100% ，选择框将在其容器 DOM 内修复，但选项将正确显示，在 firefox 上测试，不需要任何 Javascript 并影响所有标签，您可以附加并将 id 设置为特定元素，以便根据您的需要对其进行样式化

【讨论】：