我正在尝试使用HTML和JavaScript创建一个ComboBox。所以我从这个链接开始思考:MultiSelect Combo (多选ComboBox)。
在这个链接中,我获取了所有资源并将它们放在了本地,得到了想要的结果。
现在我想让我的输入框动态化,这样我就可以通过传递div和其他所需属性,在任何地方使用它并使用任意次数。
我在这里尝试的是:
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>
</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>
现在我想让我的输入框动态化,这样我就可以通过传递div和其他所需属性,在任何地方使用它并使用任意次数。
我在这里尝试的是:
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>
而 JS 代码为 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>"
}
但我面临的挑战是:
- 无法创建正确的输入标签元素,导致错误。
在第一个案例中:
输入标签为:
"<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 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>"
现在请帮我解决这个问题。