jQWidgets jqxComboBox valueMember Property

Last Updated : 23 Jul, 2025

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 valueMember property is used to set or return the valueMember of the stated jqxComboBox. Moreover, this property defines an object property’s name in order to set it like a ‘value‘ of the stated sectors of the combobox where the name is confined in the collection stated by the ‘source‘ property. It is of type string and its default value is " ".

Syntax:

To set the valueMember property.

$("selector").jqxComboBox({valueMember: 'last_Name'});

To get the valueMember property.

var valueMember = $('selector').jqxComboBox('valueMember');

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 valueMember 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 valueMember 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,
                width: '250px',
                animationType: 'slide',
                displayMember: "name",
                valueMember: "index",
            });

            $('#jqxCB').on('change', function (event) {
                $("#divID").html("Value: " + event.args.item.value);
            });
        });
    </script>
</body>
</html>

Output:

 

Example 2: The following is another example of the jqxComboBox valueMember 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 valueMember 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,
                width: '250px',
                animationType: 'slide',
                displayMember: "name",
                valueMember: null,
            });

            $('#btn').click(function () {
                var vm = $('#jqxCB').jqxComboBox('valueMember');
                if (vm === null) {
                    $('#log').text("Null!");
                }
                else {
                    $('#log').text("Not null!");
                }
            });
        });
    </script>
</body>

</html>

Output:

 

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxcombobox/jquery-combobox-api.htm?search=

Comment

Explore