jQWidgets jqxComboBox validateSelection Property
Last Updated :
07 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 validateSelection property is used to specify if an item from the displayed combobox is capable of being selected in multiple-selection mode or not. It is of type function and its default value is “null”.
Syntax:
- To set the validateSelection property.
$('#selector').jqxComboBox({ validateSelection: function(name)
{
if (name == "jQuery")
return false;
return true;
}
});
- To get the validateSelection property.
var vs = $('#selector').jqxComboBox('validateSelection');
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 validateSelection 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 validateSelection property
</ h3 >
< div id = 'jqxCB' ></ div >
</ center >
< script type = "text/javascript" >
var source = [
"jQuery",
"HTML",
"BootStrap",
"java",
"Python",
"CSS"
];
$("#jqxCB").jqxComboBox({
source: source,
width: '250px',
multiSelect: true,
validateSelection: function (name) {
if (name == "jQuery")
return false;
return true;
}
});
$("#jqxCB").jqxComboBox('selectItem', 'jQuery');
$("#jqxCB").jqxComboBox('selectItem', 'BootStrap');
</ script >
</ body >
</ html >
|
Output:
Example 2: The following is another example of the jqxComboBox validateSelection 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 validateSelection 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",
validateSelection: null,
});
$('#btn').click(function () {
var vs = $('#jqxCB').jqxComboBox('validateSelection');
if (vs === 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...