📅 最后修改于: 2023-12-03 15:02:19.640000 🧑 作者: Mango
jQWidgets jqxListBox 是一个强大的 JavaScript 库，可用于创建各种类型的列表框和下拉框。其中 updateAt() 方法可用于更新列表框中指定索引位置的项的值和标签。
updateAt(index, item)
参数：
index：要更新的项的索引item：更新后的项，可以是一个字符串或一个对象，表示项的值和标签下面是一个简单的示例，演示了如何使用 updateAt() 方法来更新列表框中的项。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQWidgets jqxListBox updateAt() 方法示例</title>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script>
<script>
$(document).ready(function() {
var data = [{
value: "1",
label: "选项1"
}, {
value: "2",
label: "选项2"
}, {
value: "3",
label: "选项3"
}];
//初始化列表框
$("#listBox").jqxListBox({
source: data,
width: 200,
height: 150
});
//更新第二个选项
$("#updateBtn").on("click", function() {
var newItem = {
value: "2",
label: "新选项"
};
$("#listBox").jqxListBox("updateAt", 1, newItem);
});
});
</script>
</head>
<body>
<div id="listBox"></div>
<br>
<button id="updateBtn">更新第二个选项</button>
</body>
</html>
在上述示例中，我们首先初始化了一个列表框，其中包含三个选项。然后，当用户点击“更新第二个选项”按钮时，我们调用了 updateAt() 方法来更新第二个选项的值和标签。最终的更新结果将相应地显示在列表框中。