8
Tôi đang cố gắng tạo ComboBox bằng html và Javascript. Vì vậy, tôi đã bắt đầu ý tưởng với liên kết này. MultiSelect Combo (MultiSelect ComboBox)Cách tạo thành phần động từ Javascript
Trong liên kết này tôi lấy tất cả các tài nguyên và được đặt trong địa phương của tôi và có kết quả mong muốn.
<!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>
Bây giờ tôi muốn hộp nhập liệu của mình hoạt động, vì vậy tôi có thể sử dụng bất kỳ đâu và bất kỳ lần nào bằng cách chuyển div và các thuộc tính bắt buộc khác.
Những gì tôi cố gắng ở đây là
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>
Và JS Mã là Js Mã
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 gì chalanges tôi phải đối mặt là
- Không thể để tạo yếu tố thẻ đầu vào chính xác gây ra lỗi.
Ở đây ví dụ:
Trong trường hợp thứ nhất:
thẻ đầu vào là
"<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">"
Trong thẻ trường hợp đầu vào thứ hai là:
"<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>"
Bây giờ hãy giúp tôi làm thế nào để sửa lỗi này.
Bạn có thể sử dụng jquery, có tùy chọn để nối html vào id div với $ ("# divId"). html ("") – Profstyle
Trong mã JS của tôi? – David
có, nhưng bạn cần nhập thư viện jquery nếu không được nhập trước! – Profstyle