EasyUI Forum
February 26, 2024, 08:57:56 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: combobox  (Read 1014 times)
rezzonico
Full Member
***
Posts: 182


View Profile
« on: August 30, 2023, 03:42:41 AM »

Hi,

I have a combobox where the user can select different line types.
In the drop-down list the lines are displayed correctly, but once a line is selected, in the combobox appears the HTML code.

Is it possible to display the line and not the code ?

See the code here:
http://217.193.156.220/jeasyui/BBB/

Thanks
Miche
Logged
jarry
Administrator
Hero Member
*****
Posts: 2257


View Profile Email
« Reply #1 on: September 10, 2023, 08:02:39 PM »

Please refer to this example.
Code:
<!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=&quot;border-top: 0px solid&quot;>' },
      { value:'1', text:'<hr style=&quot;border-top: 1px solid&quot;>' },
      { value:'2', text:'<hr style=&quot;border-top: 2px solid&quot;>' },
      { value:'3', text:'<hr style=&quot;border-top: 3px solid&quot;>' },
      { value:'4', text:'<hr style=&quot;border-top: 4px solid&quot;>' },
      { value:'5', text:'<hr style=&quot;border-top: 5px solid&quot;>' }
   ]
">
</body>

</html>
Logged
rezzonico
Full Member
***
Posts: 182


View Profile
« Reply #2 on: September 20, 2023, 06:16:45 AM »

Thanks !

Regards
Miche
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!