Please refer to this example.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script>
$(function () {
var cc = $('#cc');
cc.combobox({
onChange: function (v) {
var g = $(this).next().find('.combobox-g');
var data = cc.combobox('getData');
var index = data.findIndex(r => r.value == v);
if (index >= 0) {
g.html(data[index].text);
} else {
g.html('');
}
},
onResize: function () {
var width = cc.combobox('textbox').css('width');
$(this).next().find('.combobox-g').css('width', width);
}
})
var tb = cc.combobox('textbox').hide();
var t = $('<div style="display:inline-block;height:28px;padding-top:6px;vertical-align:top"></div>').addClass('combobox-g').insertAfter(tb);
cc.combobox('resize');
})
</script>
</head>
<body>
<input id="cc" name="LineWidth" style="width:200px;" data-options="
required: true,
panelHeight: 'auto',
editable: false,
valueField: 'value',
textField: 'text',
value: '',
data: [
{ value:'0', text:'<hr style="border-top: 0px solid">' },
{ value:'1', text:'<hr style="border-top: 1px solid">' },
{ value:'2', text:'<hr style="border-top: 2px solid">' },
{ value:'3', text:'<hr style="border-top: 3px solid">' },
{ value:'4', text:'<hr style="border-top: 4px solid">' },
{ value:'5', text:'<hr style="border-top: 5px solid">' }
]
">
</body>
</html>
