博客

jQWidgets jqxListBox unselectItem()方法

  • Post category:jquery

jqxListBox 是 jQWidgets 提供的一种列表框控件，用于在 Web 应用程序中创建列表。unselectItem() 方法用于取消选中 jqxListBox 控件中指定项。以下是 jqxListBox 的 unselectItem() 方法的详细说明：

unselectItem() 方法

unselectItem() 方法用于取消选中 jqxListBox 控件中指定项。该方法接受一个参数，该参数可以是一个整数值或一个 DOM 元素，表示要取消选中的项。

// 取消选中 jqxListBox 控件中索引为 1 的项
$("#jqxListBox").jqxListBox("unselectItem", 1);

// 取消选中 jqxListBox 控件中 ID 为 "item2" 的项
$("#jqxListBox").jqxListBox("unselectItem", document.getElementById("item2"));

示例

以下是两个示例，演示如何使用 unselectItem() 方法取消选中 jqxListBox 控件中指定项。

示例 1

在此示例中，我们创建了一个 jqxListBox 控件，并使用 selectIndex() 方法选中了第一项。当用户单击按钮时，我们使用 unselectItem() 方法取消选中第一项。

<div id="jqxListBox">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>
<button id="btnUnselectItem">Unselect Item 1</button>

<script>
    $(document).ready(function () {
        // 创建 jqxListBox 控件
        $("#jqxListBox").jqxListBox();

        // 选中第一项
        $("#jqxListBox").jqxListBox("selectIndex", 0);

        // 监听按钮单击事件
        $("#btnUnselectItem").on("click", function () {
            // 取消选中第一项
            $("#jqxListBox").jqxListBox("unselectItem", 0);
        });
    });
</script>

示例 2

在此示例中，我们创建了一个 jqxListBox 控件，并使用 selectIndex() 方法选中了第一项。当用户单击第二个按钮时，我们使用 getSelectedItem() 方法获取当前选中项，并将其输出到控制台。当用户单击第三个按钮时，我们使用 unselectItem() 方法取消选中当前选中项。

<div id="jqxListBox">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>
<button id="btnGetSelectedItem">Get Selected Item</button>
<button id="btnUnselectSelectedItem">Unselect Selected Item</button>

<script>
    $(document).ready(function () {
        // 创建 jqxListBox 控件
        $("#jqxListBox").jqxListBox();

        // 选中第一项
        $("#jqxListBox").jqxListBox("selectIndex", 0);

        // 监听获取当前选中项按钮单击事件
        $("#btnGetSelectedItem").on("click", function () {
            // 获取当前选中项
            var selectedItem = $("#jqxListBox").jqxListBox("getSelectedItem");

            // 输出当前选中项到控制台
            console.log(selectedItem);
        });

        // 监听取消选中当前选中项按钮单击事件
        $("#btnUnselectSelectedItem").on("click", function () {
            // 取消选中当前选中项
            $("#jqxListBox").jqxListBox("unselectItem", $("#jqxListBox").jqxListBox("getSelectedItem"));
        });
    });
</script>

以上是 jqxListBox 的 unselectItem() 方法的详细说明，以及两个示例说明。

Tags: