jQWidgets jqxListBox clear() 方法(1)

📌 相关文章

📜 jQWidgets jqxListBox clear() 方法(1)

📅 最后修改于: 2023-12-03 15:16:55.009000 🧑 作者: Mango

jQWidgets jqxListBox clear() 方法

简介

clear() 方法是 jQWidgets jqxListBox 组件的一个函数，用于清空列表框中的所有项目。

语法

$('#listbox').jqxListBox('clear');

参数

该方法不接受任何参数。

返回值

该方法没有返回值。

示例

$("#clearButton").click(function() {
    $("#listbox").jqxListBox('clear');
});

说明

调用 clear() 方法将删除列表框中的所有项目，同时清空搜索框的内容。

请注意，此方法不会触发 "select" 或 "change" 事件。如果需要处理这些事件，请在调用 clear() 方法之后手动触发。

示例

下面是一个具体的示例，展示如何使用 clear() 方法清空列表框：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jqxListBox clear() 示例</title>
    <link rel="stylesheet" href="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
</head>
<body>
    <div id="listbox"></div>
    <br />
    <button id="clearButton">Clear</button>

    <script>
        $(document).ready(function () {
            var data = [
                'Item 1',
                'Item 2',
                'Item 3',
                'Item 4',
                'Item 5'
            ];

            $("#listbox").jqxListBox({ 
                source: data,
                width: '200px',
                height: '150px'
            });

            $("#clearButton").click(function () { 
                $("#listbox").jqxListBox('clear');
            });
        });
    </script>
</body>
</html>

上述示例中，我们创建了一个列表框，并绑定了一组数据作为选项。单击 "Clear" 按钮后，调用 clear() 方法将清空列表框中的所有项目。

注意：为了能够正确显示示例，你需要引入 jQWidgets 相关的 CSS 和 JavaScript 文件。