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

当用户选择了值时，您可以使用here所述的validate()回调选项进行提醒。

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

选择框更改css类

1 个答案: