jQWidgets jqxComboBox renderSelectedItem Property

Last Updated : 19 May, 2023

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. 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 renderSelectedItem property is a callback function that is invoked whenever a selected item from the stated combobox is rendered. Moreover, this function is helpful in customizing the displayed text in the input field of the combobox. It is of type function and its default value is “null“.

Syntax:

To set the renderSelectedItem property:

$('#selector').jqxComboBox({renderSelectedItem: function (i, itm) {
        var d_record = data[i];
        return d_record.name + " " + d_record.index;
    },
});

To get the renderSelectedItem property:

var rsi = $('#selector').jqxComboBox('renderSelectedItem');

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

Example 1: The below example illustrates the jQWidgets jqxComboBox renderSelectedItem property.

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/jqxlistbox.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxcombobox.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
            jQWidget jqxComboBox renderSelectedItem property 
        </h3> 
  
        <div id='jqxCB'></div> 
        <br> 
        <div id="divID"></div> 
    </center> 
  
    <script type="text/javascript"> 
  
        $(document).ready(function () { 
            var data = [ 
                { 
                    name: "HTML", 
                    index: 0, 
                }, 
                { 
                    name: "CSS", 
                    index: 1, 
                }, 
                { 
                    name: "JavaScript", 
                    index: 2, 
                }, 
                { 
                    name: "jQuery", 
                    index: 3, 
                }, 
                { 
                    name: "Angularjs", 
                    index: 4, 
                }, 
                { 
                    name: "Bootstrap", 
                    index: 5, 
                } 
            ]; 
  
            $("#jqxCB").jqxComboBox({ 
                source: data, 
                selectedIndex: 1, 
                width: '250px', 
                animationType: 'slide', 
                displayMember: "name", 
                valueMember: "index", 
                renderSelectedItem: function (i, itm) { 
                    var d_record = data[i]; 
                    return d_record.name + " " + d_record.index; 
                }, 
                renderer: function (i, label, val) { 
                    var d_record = data[i]; 
                    var r =  
                        '<table style="min-width: 150px;"><tr><td>' 
                        + d_record.name + " " + d_record.index 
                        + "</td></tr></table>"; 
                    return r; 
                }, 
            }); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: The following is another example of the jqxComboBox renderSelectedItem property 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/jqxlistbox.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxcombobox.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
            jQWidget jqxComboBox renderSelectedItem property 
        </h3> 
  
        <div id='jqxCB'></div> 
        <br> 
        <input type="button" 
               id="btn" 
               value="Click Here" 
               style="padding: 5px 14px;  
                      margin-top: 15px;"> 
        <div id="log"></div> 
    </center> 
  
    <script type="text/javascript"> 
  
        $(document).ready(function () { 
            var data = [ 
                { 
                    name: "HTML", 
                    index: 0, 
                }, 
                { 
                    name: "CSS", 
                    index: 1, 
                }, 
                { 
                    name: "JavaScript", 
                    index: 2, 
                }, 
                { 
                    name: "jQuery", 
                    index: 3, 
                }, 
                { 
                    name: "Angularjs", 
                    index: 4, 
                }, 
                { 
                    name: "Bootstrap", 
                    index: 5, 
                } 
            ]; 
  
            $("#jqxCB").jqxComboBox({ 
                source: data, 
                selectedIndex: 1, 
                width: '250px', 
                animationType: 'slide', 
                displayMember: "name", 
                valueMember: "index", 
                renderSelectedItem: null, 
            }); 
  
            $('#btn').click(function () { 
                var r =  
                    $('#jqxCB').jqxComboBox('renderSelectedItem'); 
                if (r === null) { 
                    $('#log').text("Null!"); 
                } 
                else { 
                    $('#log').text("Not null!"); 
                } 
            }); 
        }); 
    </script> 
</body> 
  
</html>