Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

jQWidgets jqxListBox change Event

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxListBox is used to illustrate a jQuery ListBox widget which comprises a list of electable elements.

The change event is activated whenever the user picks an item from the stated Listbox.


$('selector').on('change', function (event) {});

Parameters: This method has the following parameters.

  • label: It is stated label of the item.
  • value: It is the stated value of the item.
  • disabled: It states if the item is disabled or not.
  • checked: It states if the item is checked or not.
  • hasThreeStates: It defines three states of the item.
  • html: It defines html form of the item.
  • index: It defines the index of the item.
  • group: It defines the group of the item.


Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>

Example: The below example illustrates the jqxListBox change event in jQWidgets.


<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" 
          type="text/css" />
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript"
    <script type="text/javascript"
        <h1 style="color: green;">
            jQWidgets jqxListBox change event
        <div id="jqxLB"></div>
        <br />
        <div id="log"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            var data =
                ["CS", "CSS", "C++",
                    "Java", "Scala"];
                source: data,
                width: "210px",
                height: "80px",
            $("#jqxLB").on("change", function (event) {
                    "Label: " + event.args.item.label



My Personal Notes arrow_drop_up
Last Updated : 13 Oct, 2021
Like Article
Save Article
Similar Reads
Related Tutorials