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 de cuadro combinado jQuery que contiene un campo de entrada con funcionalidad de autocompletar y una lista de elementos seleccionables que se muestran en un menú desplegable.
El método updateItem() se utiliza para actualizar el nuevo elemento. Acepta dos parámetros, el primero es el elemento nuevo y el segundo es el elemento existente que necesita actualizarse.
El Objeto representa los siguientes campos:
- etiqueta
- valor
- desactivado
- comprobado
- tiene tres estados
- html
- índice
- grupo
Sintaxis:
$('selector').jqxComboBox('updateItem', new_item, existing_item);
Archivos vinculados: descargue jQWidgets desde https://www.jqwidgets.com/download/link. 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/jqxcolorpicker.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>
< tipo de secuencia de comandos = «texto/javascript» src = «jqwidgets/jqxcombobox.js»></secuencia de comandos>
El siguiente ejemplo ilustra el método jqxComboBox updateItem() en jQWidgets:
Ejemplo:
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/jqxcolorpicker.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>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxComboBox updateItem() Method
</h3>
<div id='jqxCB'></div>
<br>
<input type="button" id='jqxBtn'
style="padding: 5px 20px;"
value="Update Item" />
</center>
<script type="text/javascript">
$(document).ready(function() {
var data = [
"Computer Science",
"C Programming",
"C++ Programming",
"Java Programming",
"Python Programming",
"HTML",
"CSS",
"JavaScript",
"jQuery",
"PHP",
"Bootstrap"
];
$("#jqxCB").jqxComboBox({
source: data,
width: '250px',
animationType: 'slide',
selectedIndex: 0
});
$('#jqxBtn').on('click', function() {
var index = $("#jqxCB").jqxComboBox(
'updateItem', 'GeeksforGeeks', 'Python Programming');
});
});
</script>
</body>
</html>
Producción:
Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxcombobox/jquery-combobox-api.htm