jQWidgets jqxComboBox valueMember Property
Last Updated :
26 Apr, 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 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=
Share your thoughts in the comments
Please Login to comment...