combobox

EasyUI Forum

April 27, 2024, 09:30:25 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > combobox

Pages: [1]

« previous next »

Author

Topic: combobox (Read 1289 times)

rezzonico

Full Member

Posts: 182

combobox

« 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: 2262

Re: combobox

« 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