Menu
I am trying to create a ComboBox in with html and Javascript. So I got to start the idea with this link. MultiSelect Combo (MultiSelect ComboBox)
In this link I take all the resources and placed in my local and got the desired result.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Format in ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="CSS/easyui.css">
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Custom Format in ComboBox</h2>
<p>This sample shows how to custom the format of list item.</p>
<div style="margin:20px 0"></div>
<div style="margin-bottom:20px">
<input class="easyui-combobox" name="language" style="width:26%;" data-options="
url: 'JSON/combobox_data1.json',
method: 'get',
valueField: 'id',
textField: 'text',
panelWidth: 350,
multiple:true,
formatter: formatItem,
label: 'Language:',
labelPosition: 'top'
">
</div>
<script type="text/javascript">
function formatItem(row){
var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' +
'<span style="color:#888">' + row.desc + '</span>';
return s;
}
</script>
</body>
</html>
Now I want my Inputbox to be Dynamic, So I can use it anywhere and any number of times by passing div and others required attributes.
What I tried here is
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Format in ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="CSS/easyui.css">
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/jquery.easyui.min.js"></script>
<script type="text/javascript" src="JS/NewCombo.js"></script>
</head>
<body>
<h2>Custom Format in ComboBox</h2>
<p>This sample shows how to custom the format of list item.</p>
<div style="margin:20px 0"></div>
<script type="text/javascript">
var myCombo = new NewCombo({
url: 'JSON/combobox_data1.json',
method: 'get',
valueField: 'id',
textField: 'text',
panelWidth: 350,
multiple:true,
//formatter: formatItem,
label: 'Language:',
});
</script>
</body>
</html>
And JS Code is Js Code
NewCombo = function(args){
var mydiv = "<div style="margin-bottom:20px">"+"
<input class="easyui-combobox" name="language" style="width:26%;" data-options="
url: 'JSON/combobox_data1.json',\
method: 'get',\
valueField: 'id',\
textField: 'text',\
panelWidth: 350,\
multiple:true,\
formatter: formatItem,\
label: 'Language:',\
labelPosition: 'top'\
">"+"
</div>"
}
ut What chalanges I am facing is
Here example :
In first case :
input tag is
"<input class="easyui-combobox" name="language" style="width:100%;" data-options="url: "JSON/combobox_data1.json",method: "get",valueField: "id",textField: "text", panelWidth: 350,multiple:true,label: "Language:",labelPosition: "top">"
In second case input tag is :
"<div id="chart_line" style="width:26%; background-color: lightblue;"><input class="easyui-combobox" name="language" style="width:100%;" data-options=" url: " json="" combobox_data1.json",="" method:="" "get",="" valuefield:="" "id",="" textfield:="" "text",="" panelwidth:="" 350,="" multiple:true,="" label:="" "language:",="" labelposition:="" "top"=""></div>"
Now Please help me how to fix this.
418
Try using the setAttribute method to add a data-options attribute dynamically:
document.getElementById('combobox1').setAttribute('data-options', '{GENERATED OPTIONS}');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
