Esta respuesta tiene ediciones sucesivas debido a las ediciones de la respuesta en la que se han ido facilitando más datos:
Editado para tener en cuenta tu última edición:
var values = document.getElementById('division').val();
if (values != null || values != ''){
showFields();
}
El método .val()
no existe en un nodo del DOM del documento HTML, sólo en jQuery. En ese caso el resultado es una matriz con todos y cada uno de los elementos seleccionados:
When the first element in the collection is a select-multiple
(i.e., a select
element with the multiple
attribute set), .val()
returns an array containing the value of each selected option
. As of jQuery 3.0, if no options are selected, it returns an empty array; prior to jQuery 3.0, it returns null
.
En castellano:
Cuando el primer elemento de la colección es un select-multiple
(p.e., un elemento select
con el atributo multiple
activado), .val()
devuelve una matriz que contiene el valor de cada option
seleccionada. A partir de jQuery 3.0, si no hay opciones seleccionadas devolverá una matriz vacía; previo a jQuery 3.0 devolvía null
.
El contenido de values
no debería ser convertido a cadena de caracteres porque su contenido es una matriz. Podrías usar la propiedad .length
para conocer el número de elementos que hay en ella:
var values = $('#division').val();
if (values != null || values.length > 0){
showFields();
}
De esta manera cubres cualquier versión de jQuery.
Por otro lado, ese código se ejecutará una única vez durante la carga de la página. Necesitas agregar un evento que se ejecute cada vez que pulses en Agregar >
(por poner un ejemplo).
Tu código y tu problema ya no es trivial y se vuelve algo complejo en el momento que no nos facilitas más información acerca del origen de los datos, si puedes seleccionar más de un equipo de una o más divisiones o no.
De cualquier manera, has dejado claro que sólo se puede tener una única división activa en todo momento, por lo que ya no necesitas el atributo multiple
. No es necesario si sólo quieres seleccionar un único elemento a la vez, basta con usar size
para obtener la misma apariencia visual:
// Simulo _spBodyOnLoadFunctionNames.push("hideFields");
document.addEventListener("DOMContentLoaded", function() {
/* Precargamos estos objetos del DOM */
var division = document.getElementById('division');
var division_sel = document.getElementById('division_sel');
var equipo = document.getElementById('equipo');
/* Llamamos a la función que oculta los equipos,
aunque debería estar oculto por defecto */
hideFields();
/* Rellenamos los campos de las divisiones */
for (var elemento in datos) {
/* Creamos un objeto "option" */
var option = document.createElement('option');
/* Le asignamos los valores "name" y el contenido de texto */
option.name = elemento;
option.appendChild(
document.createTextNode(datos[elemento].nombre)
);
/* Agregamos el nodo al select */
division.appendChild(option);
}
/* Ahora agregamos el código para agregar elementos de la selección */
document.getElementById('agregar_division').addEventListener('click', function() {
/* Limpiamos la cajita de división seleccionada */
while (division_sel.firstChild) {
division_sel.removeChild(division_sel.firstChild);
}
/* Ahora agregamos el elemento seleccionado */
for (i = 0; i < division.options.length; i++) {
if (division.options[i].selected == true) {
/* Agregamos un nodo clonado del original (con mismo contenido) */
division_sel.appendChild(division.options[i].cloneNode(true));
/* Limpiamos el contenido previo de los equipos (debería estar borrado) */
while (equipo.firstChild) {
equipo.removeChild(equipo.firstChild);
}
/* Y ahora introducimos sus equipos en la caja de abajo */
for(var elemento in datos[division.options[i].name].equipos) {
/* Creamos un objeto "option" */
var option = document.createElement('option');
/* Le asignamos los valores "name" y el contenido de texto */
option.name = elemento;
option.appendChild(
document.createTextNode(
datos[division.options[i].name].equipos[elemento]
)
);
/* Agregamos el nodo al select */
equipo.appendChild(option);
}
/* Mostramos la caja de equipos */
showFields();
}
}
});
/* Ahora agregamos el código para quitar elementos de la selección */
document.getElementById('quitar_division').addEventListener('click', function() {
/* Limpiamos la cajita de división seleccionada */
while (division_sel.firstChild) {
division_sel.removeChild(division_sel.firstChild);
}
/* Limpiamos la cajita de equipos */
while (equipo.firstChild) {
equipo.removeChild(equipo.firstChild);
}
/* Ocultamos el campo de equipos */
hideFields();
});
});
function hideFields() {
/* No uses "parentNode...parentNode", es una mala práctica, se complicará
mantener el código HTML. Mejor selecciona el nodo exacto que quieras */
equipo.style.display = "none";
}
function showFields() {
equipo.style.display = "block";
}
/* Datos de ejemplo */
var datos = {
'liga_es': {
nombre: 'Liga Española',
equipos: {
'equipo_esp_1': 'Equipo Español 1',
'equipo_esp_2': 'Equipo Español 2',
'equipo_esp_3': 'Equipo Español 3',
},
},
'liga': {
nombre: 'Liga Extranjera',
equipos: {
'equipo_ext_1': 'Equipo Extranjero 1',
'equipo_ext_2': 'Equipo Extranjero 2',
'equipo_ext_3': 'Equipo Extranjero 3',
},
},
};
/* Centramos los contenidos en la celda */
table td {
text-align: center;
vertical-align: middle;
}
/* Hacemos que los botones ocupen el ancho de la celda */
table button {
width: 100%;
margin: 2px 0px;
}
<table>
<tr>
<td>
<select id="division" size="3" title="División"
style="width: 143px; overflow: scroll;">
</select>
</td>
<td>
<button id="agregar_division">Agregar ></button>
<button id="quitar_division">< Quitar</button>
</td>
<td>
<select id="division_sel" size="3" title="División Seleccionada"
style="width: 143px; overflow: scroll;">
</select>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
<!-- Simulamos tres niveles de profundidad para tu campo -->
<div><div><div>
<select id="equipo" size="5"
title="Equipos seleccionados"
style="width: 143px; height: 125px; overflow: scroll;">
</select><br/>
</div></div></div>
<select>
o una porción? ¿Dónde está el código de la funciónshowFields()
y desde dónde se llama?"equipo"
nunca será igual a null o vacío porque"equipo"
es unstring
cuyo contenido es la palabra "equipo". Tendrías que ponerlo con js o jquery, es decir$("#equipo")
odocument.getElementById("equipo")
OR
no existe en js,||
es el operador O logico<select>
?