jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente y optimizado, independiente de la plataforma y ampliamente compatible. El jqxComboBox se usa para representar un widget jQuery ComboBox que contiene un campo de entrada con funcionalidad de autocompletar y una lista de elementos seleccionables que se muestran en un menú desplegable.
La propiedad displayMember se usa para establecer o devolver el displayMember de los elementos donde displayMember define el nombre de una propiedad de objeto para mostrar. El nombre está contenido en la colección especificada por la propiedad ‘fuente’. Es de tipo String y su valor por defecto es “”.
Sintaxis:
- Para establecer la propiedad displayMember .
$("selector").jqxComboBox({displayMember: 'firstName'});
- Para obtener la propiedad displayMember .
var displayMember = $('selector').jqxComboBox('displayMember');
Archivos vinculados: descargue jQWidgets desde el enlace. En el archivo HTML, busque los archivos de script en la carpeta descargada.
<link rel=”hoja de estilo” 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>
Ejemplo: El siguiente ejemplo ilustra la propiedad jqxComboBox displayMember en 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 displayMember 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("Name: " + event.args.item.label
+ ", Value: " + event.args.item.value);
});
});
</script>
</body>
</html>
Producción:
