jQWidgets jqxComboBox getVisibleItems() Method

Last Updated : 22 Aug, 2021

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 jqxComboBox is used to represent a jQuery Combobox widget that contains an input field with autocomplete functionality and a list of selectable items displayed in a drop-down.

The getVisibleItems() method is used to get all items displayed in the ComboBox. It does not accept any parameter and returns an array value.

The returned value is represented as an object with the following fields.

label
value
disabled
checked
hasThreeStates
html
index
group

Syntax:

var items = $('selector').jqxComboBox('getVisibleItems');

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/jqxcolorpicker.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>
<script type=”text/javascript” src=”jqwidgets/jqxcombobox.js”></script>

Example: The below example illustrates the jqxComboBox getVisibleItems() method in jQWidgets.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <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/jqxcolorpicker.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> 
    <script type="text/javascript" 
            src="jqwidgets/jqxcombobox.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
            jQWidgets jqxComboBox getVisibleItems() Method 
        </h3> 
  
        <div id='jqxCB'></div> 
        <br> 
        <input type="button" id='jqxBtn' 
            style="padding: 5px 20px;"
            value="Get Visible Element" /> 
    </center> 
  
    <script type="text/javascript"> 
        $(document).ready(function () { 
            var data = [ 
                "Computer Science", 
                "C Programming", 
                "C++ Programming", 
                "Java Programming", 
                "Python Programming", 
                "HTML", 
                "CSS", 
                "JavaScript", 
                "jQuery", 
                "PHP", 
                "Bootstrap" 
            ]; 
  
            $("#jqxCB").jqxComboBox({ 
                source: data, 
                width: '250px', 
                animationType: 'slide', 
                selectedIndex: 0 
            }); 
  
            var items = $("#jqxCB").jqxComboBox('getVisibleItems'); 
  
            var item1 = items[0]; 
            var item2 = items[10]; 
  
            $('#jqxBtn').on('click', function () { 
                alert("First Option: " + item1.label +  
                    ", Last Option: " + item2.label); 
            }); 
        }); 
    </script> 
</body> 
  
</html>