javascript - 选择框更改 css 类

Question

不幸的是我无法用 x-editable 解决这个问题...

我正在尝试使用 x-editable 更改 select 上的 (hprimary) css 类。这是我的 jsfiddel:jsfiddel (仅适用于 x-editable)。另外，我用普通的选择按钮尝试了它，它在那里工作。 ( jsfiddel2 ) 那么我必须在 x-editable 脚本中更改什么才能使其工作？

html:

<div class="hpanel hprimary" id="overview">
 </div>
  <div><label class="control-label">TEST</label> 
    <a href="#" id="select" data-type="select" data-pk="1"data-value="" 
       data-title="" class="editable editable-click" style="color: gray;">not selected</a>
  </div>

JavaScript:

$(function () {
$.fn.editable.defaults.mode = 'popup';
$('#select').editable({
    prepend: "not selected",
    placement: 'right',
    source: [{
        value: 1,
        text: 'NTP(red)'
    }, {
        value: 2,
        text: 'SUCCESS(green)'
    }, {
        value: 3,
        text: 'OPTION(blue)'
    }],

});
});

CSS:

.hpanel {
background-color: none;
border: none;
box-shadow: none;
margin-bottom: 25px
}
.hpanel.hprimary .panel-body {
border-top: 2px solid #34495e
}
.hpanel.hgreen .panel-body {
border-top: 2px solid #62cb31
}
.hpanel.hblue .panel-body {
border-top: 2px solid #3498db
}
.hpanel.hred .panel-body {
border-top: 2px solid #e74c3c
}

Answer 1

您可以使用 validate() 回调选项，如所述 here当用户选择一个值时收到警报。

根据您的示例，您将使用正则表达式从文本值中提取颜色，并将适当的类添加到 hpanel 元素。