En el siguiente apartado implementaremos 3 input select dinámicos - HTML, la data se alimentara desde servicios WCF.
Para llevar acabo este laboratorio haremos uso de Ajax, JQuery y tipo de dato JSON, independientemente que tenemos que considerar el Consumir servicios WCF - puedes consultar el link.
function LoadFillDepartamento(){
$.ajax({//Inicializamos el Ajax que es parte del JQuery
url: "Home/GetAllDepartamento",//Url que se encarga de linkear el método que trae la
data
type: "POST",",//Tipo POST - para
obtener la lista de datos
dataType:
"json",//Dato
tipo json - el método que nos trae la data es un JsonResult
data: "{}",",//Pasar lo
parámetros o filtros si es que existiera
success: function (data) {//Ejecutamos la función para poder cargar la data al
select
if (data == null)
{//Validación de datos nulos
alert('Disculpe, No hay departamentos que
mostrar.');
return
} else
{
for
(var i = 0; i < data.length; i++) {{//Recorremos y almacenamos la data en el select (SltDepartamento)
$("#SltDepartamento").append("<option value=" +
data[i].CodDepartamento + ">" +
data[i].DesDepartamento + "</option>");
}
}
},
error: function (jqXHR, status, error) {//mensaje de error
alert('Disculpe, existió un problema método
LoadFillDepartamento');
}
});
}
Segundo método LoadFillProvincia() con el parámetro que captura el valor del código del select del departamento:
function LoadFillProvincia(jspCodDepartamento) {
$.ajax({
url: "Home/GetAllProvincia",
type: "POST",
dataType: "json",
data:
{ pCodDepartamento: jspCodDepartamento },//parámetro
que captura el valor del codigo de departamento
success:
function (data) {
if
(data != null) {
$("#SltProvincia").find('option').remove();
for
(var i = 0; i < data.length; i++) {
$("#SltProvincia").append("<option value=" + data[i].CodProvincia
+ ">" + data[i].DesProvincia + "</option>");
LoadDistrito();
}
}
else {
alert('Disculpe, El departamento
seleccionado\nno cuenta con provincias.');
return
}
},
error: function
(jqXHR, status, error) {
alert('Disculpe, existió un
problema método LoadFillProvincia');
return;
}
})
}
Tercer método LoadFillDistrito() con el parámetro que captura el valor del código del select de la provincia:
function
LoadFillDistrito(jspCodProvincia) {
$.ajax({
url: "Home/GetAllDistrito",
type: "POST",
dataType: "json",
data:
{ pCodProvincia: jspCodProvincia },},//parámetro
que captura el valor del codigo de provincia
success:
function (data) {
if
(data != null) {
$("#SltDistrito").find('option').remove();//Removemos
los datos actuales para volver a cargar los datos según la selección que se
realiza en el select de la provincia
for (var i = 0; i < data.length; i++) {
$("#SltDistrito").append("<option value=" + data[i].CodDistrito
+ ">" + data[i].DesDistrito + "</option>");
}
}
else {
alert('Disculpe, La provincia
seleccionado\nno cuenta con distritos.');
return
}
},
error: function
(jqXHR, status, error) {
alert('Disculpe, existió un
problema método LoadFillDistrito');
return;
}
})
}
Cuarto método LoadProvincia() la que se encargara de de seleccionar valores iniciales por defecto y cargar los demás select:
function LoadProvincia() {
//Seleccionar por defecto el departamento Lima 15
$("<option value='15'>DEPARTAMENTO
LIMA</option>").appendTo("#SltDepartamento");
//Cargar las provincias dependientes del departamento
15
vCodDepartamento = $('#SltDepartamento').val();
if (vCodDepartamento = '15')
{
LoadFillProvincia(vCodDepartamento);
}
//Select's dependiente del departamento
//Cargar las provincias según el departamento
seleccionado
$('#SltDepartamento').change(function
() {
var vCodDepartamento = $(this).val();
LoadFillProvincia(vCodDepartamento);
});
}
Quito método LoadDistrito() la que se encargara de de seleccionar valor iniciales por defecto y cargar los :
function LoadDistrito() {
vCodProvincia = $('#SltProvincia').val();//captura el valor inicial - en primera instancia
if (vCodProvincia != null
&& vCodProvincia != "") {
LoadFillDistrito(vCodProvincia); //carga
los datos según el valor seleccionado
} else {
alert('Disculpe, existió un problema al
cargar los distritos');
return;
}
$('#SltProvincia').change(function
() {//captura el valor seleccionado en segunda
instancia
var vCodProvincia = $(this).val();
LoadFillDistrito(vCodProvincia); //carga
los datos según el valor seleccionado
});
}
function IniciazaMetodos() {
LoadFillDepartamento();
LoadProvincia();
}
De esta manera quedaría el primer archivo AjaxMethods.js creado:
function IniciazaMetodos() {
LoadFillDepartamento();
LoadProvincia();
}
function LoadFillDepartamento(){
$.ajax({
url: "Home/GetAllDepartamento",
type:
"POST",
dataType: "json",
data: "{}",
success: function
(data) {
if
(data == null) {
alert('Disculpe,
No hay departamentos que mostrar.');
return
} else
{
for
(var i = 0; i < data.length; i++) {
$("#SltDepartamento").append("<option value=" +
data[i].CodDepartamento + ">" +
data[i].DesDepartamento + "</option>");
}
}
},
error: function (jqXHR, status, error) {
alert('Disculpe, existió un problema método
LoadFillDepartamento');
}
});
}
function LoadProvincia() {
//Seleccionar por defecto el departamento Lima 15
$("<option value='15'>DEPARTAMENTO
LIMA</option>").appendTo("#SltDepartamento");
//Cargar las provincias dependientes del departamento
15
vCodDepartamento = $('#SltDepartamento').val();
// alert(vCodDepartamento);
if (vCodDepartamento = '15')
{
LoadFillProvincia(vCodDepartamento);
}
//Select's dependiente del departamento
//Cargar las provincias según el departamento
seleccionado
$('#SltDepartamento').change(function
() {
var vCodDepartamento = $(this).val();
// alert(vCodDepartamento);
LoadFillProvincia(vCodDepartamento);
});
}
function LoadFillProvincia(jspCodDepartamento) {
$.ajax({
url: "Home/GetAllProvincia",
type: "POST",
dataType: "json",
data: { pCodDepartamento:
jspCodDepartamento },
success: function
(data) {
if
(data != null) {
$("#SltProvincia").find('option').remove();
for
(var i = 0; i < data.length; i++) {
$("#SltProvincia").append("<option value=" +
data[i].CodProvincia + ">" +
data[i].DesProvincia + "</option>");
LoadDistrito();
}
}
else {
alert('Disculpe, El departamento
seleccionado\nno cuenta con provincias.');
return
}
},
error: function
(jqXHR, status, error) {
alert('Disculpe, existió un
problema método LoadFillProvincia');
return;
}
})
}
function
LoadDistrito() {
vCodProvincia = $('#SltProvincia').val();
// alert(vCodProvinci a);
if (vCodProvincia != null
&& vCodProvincia != "") {
LoadFillDistrito(vCodProvincia);
} else {
alert('Disculpe, existió un problema al
cargar los distritos');
return;
}
$('#SltProvincia').change(function () {
var
vCodProvincia = $(this).val();
LoadFillDistrito(vCodProvincia);
});
}
function
LoadFillDistrito(jspCodProvincia) {
$.ajax({
url: "Home/GetAllDistrito",
type: "POST",
dataType: "json",
data: { pCodProvincia: jspCodProvincia
},
success: function
(data) {
if
(data != null) {
$("#SltDistrito").find('option').remove();
for
(var i = 0; i < data.length; i++) {
$("#SltDistrito").append("<option value=" + data[i].CodDistrito
+ ">" + data[i].DesDistrito + "</option>");
}
}
else {
alert('Disculpe,
La provincia seleccionado\nno cuenta con distritos.');
return
}
},
error: function
(jqXHR, status, error) {
alert('Disculpe, existió un
problema método LoadFillDistrito');
return;
}
})
}
Luego creamos el segundo archivo JavaScript (.js) de nombre Principal.js que se encargara de llamar al método de IniciazaMetodos que está en el primer archivo.
$(document).ready(function () {
IniciazaMetodos();
});
De esta manera podemos realizar inputs de tipo select dinámicos.
Nos vemos en el siguiente apartado :)
De esta manera podemos realizar inputs de tipo select dinámicos.
Nos vemos en el siguiente apartado :)
0 Comentarios