選擇框更改CSS類

Question

不幸的是，我無法使用x-editable解決這個問題。

我正在嘗試使用x-editable更改select的（主要）css類。 這是我的jsfiddel： jsfiddel （僅適用於x-editable）。 此外，我嘗試了一個正常的選擇按鈕，它在那里工作。 （ jsfiddel2 ）那么我必須在x可編輯腳本中進行哪些更改才能使其正常工作？

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()回調選項，以在用戶選擇一個值時收到警報。

根據您的示例，然后將使用正則表達式從文本值中提取顏色，並將適當的類添加到hpanel元素。