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-bobox" name="language" style="width:26%;" data-options="
url: 'JSON/bobox_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/bobox_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-bobox" name="language" style="width:26%;" data-options="
url: 'JSON/bobox_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
- Not able to create correct input tag element which causing error.
Here example :
In first case :
input tag is
"<input class="easyui-bobox" name="language" style="width:100%;" data-options="url: "JSON/bobox_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-bobox" name="language" style="width:100%;" data-options=" url: " json="" bobox_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.
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-bobox" name="language" style="width:26%;" data-options="
url: 'JSON/bobox_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/bobox_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-bobox" name="language" style="width:26%;" data-options="
url: 'JSON/bobox_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
- Not able to create correct input tag element which causing error.
Here example :
In first case :
input tag is
"<input class="easyui-bobox" name="language" style="width:100%;" data-options="url: "JSON/bobox_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-bobox" name="language" style="width:100%;" data-options=" url: " json="" bobox_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.
Share Improve this question edited Jun 8, 2017 at 13:12 David asked Jun 6, 2017 at 9:33 DavidDavid 4,28311 gold badges41 silver badges90 bronze badges 11- You may use jquery, has an option to append html to div id with $("#divId").html("<html></html>") – Profstyle Commented Jun 6, 2017 at 9:37
- In my JS code ? – David Commented Jun 6, 2017 at 9:38
- yes, but you need to import jquery library if not imported first ! – Profstyle Commented Jun 6, 2017 at 9:40
- Ya, What worrying me I imported my jquery library in html. Cheking how to import in javascript. – David Commented Jun 6, 2017 at 9:41
- Try rewriting this question in a much simpler way. The idea I have about what you want is a broken idea and thus I (probably others) can't help you. You need to split the problem down into small sections, what was your original idea, what you have tried and why you tried it the way you did and why is that not working together with the errors/warnings you got? – Starx Commented Jun 8, 2017 at 12:25
1 Answer
Reset to default 13 +50Try using the setAttribute method to add a data-options attribute dynamically:
document.getElementById('bobox1').setAttribute('data-options', '{GENERATED OPTIONS}');