2

Tengo esto:

<select id="division" multiple="multiple" title="Equipos seleccionados" style="width:143px;height:125px;overflow:scroll;">
<option value="1" title="Bundesliga">Bundesliga</option>
</select>

Estoy haciendole esto:

_spBodyOnLoadFunctionNames.push("hideFields");

function hideFields() {
    var control = findcontrol("equipo");
    control.parentNode.parentNode.parentNode.style.display = "none";
}

function showFields() {
    var control = findcontrol("equipo");
    control.parentNode.parentNode.parentNode.style.display = "block";
}

function findcontrol(field) {
    var arr = document.getElementById(field);
    return arr;
}

var values = document.getElementById('division').val();;
if (values != null || values != ''){
    showFields();
}

pero no me pasa a la funcion showFields();

Lo que quiero es que cuando no haya nada en division que no me muestre el equipo y cuando si hay algo en division que aparezca el equipo

Como lo hago en Javascript? Javascript sin ninguna libreria. El codigo es generado por Sharepoint

Visualmente:

  • Al cargar la pagina por defecto

Al cargar la pagina por defecto

  • Al pasar una division a la parte derecha o seleccionarla

Al pasar una division a la parte derecha o seleccionarla

12
  • ¿Ese es el <select> o una porción? ¿Dónde está el código de la función showFields() y desde dónde se llama? el 24 abr. 2018 a las 13:45
  • 3
    "equipo" nunca será igual a null o vacío porque "equipo" es un string cuyo contenido es la palabra "equipo". Tendrías que ponerlo con js o jquery, es decir $("#equipo") o document.getElementById("equipo")
    – Rabegi
    el 24 abr. 2018 a las 13:47
  • y OR no existe en js, || es el operador O logico
    – Klaimmore
    el 24 abr. 2018 a las 13:52
  • que es "division", un <select> ?
    – Klaimmore
    el 24 abr. 2018 a las 13:56
  • "division" es un multiple choices el 24 abr. 2018 a las 14:10

3 respuestas 3

2

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 &gt;</button>
      <button id="quitar_division">&lt; 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>

6
  • no puedo añadir onchange="comprobar()" porque es una lista de Sharepoint y no puedo modificar el DOM, o eso creo... el 24 abr. 2018 a las 14:54
  • De todos modos no es recomendable poner funciones en los elementos HTML, tú puedes agregar un evento on. change directamente en Javascript basándote en el id del elemento, así dejas el contenido HTML lo más independiente posible del código Javascript.
    – A. Cedano
    el 24 abr. 2018 a las 15:03
  • He editado a ver si visualmente se capta la idea. Mi expresion tampoco es muy buena el 24 abr. 2018 a las 16:30
  • ¿Se puede seleccionar más de una división? ¿Los equipos salen arriba o debajo? el 24 abr. 2018 a las 19:28
  • Esta ultima edicion de tu respuesta esta bien pero puedo agregar la liga extranjera y me saldran los 3 equipos extranjeros y puedo agregar la liga española y me saldrian los 3 equipos españoles, es decir, si agrego ambas ligas me tendran que salir los equipos de ambas ligas, en el ejemplo 6 el 25 abr. 2018 a las 7:16
1

Al realizar:

document.getElementById('division')

Obtienes el objeto DOM de un select, para saber si tiene algun elemento seleccionado, tendrias que consultar su propiedad .value. Esta propiedad tiene el primer elemento seleccionado.

Ejemplo:

function divisionChange() {
  var select = document.getElementById('division');
  if (select.value) {
    console.log("llamar a showFields()");
  } else {
    console.log("llamar a hideFields()");
  }
}
<select id="division" multiple onchange="divisionChange()">
  <option value="1">Uno</option>
  <option value="2">Dos</option>
</select>

1

Para obtener el valor es con $("#id").val();.

Te dejo un ejemplo breve:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="miId" multiple="multiple">
    <option value="1">Cafe</option>
    <option value="2">Chocolate</option>
    <option value="3">Coca Cola</option>
    <option value="4">Snacks</option>
    <option value="5">Vino</option>
</select>
<input type="button" onclick="miFuncion();" value="Obtener Valores">
<script>
function miFuncion(){
var values = $('#miId').val();
  if(values == "" || values == null){
  alert("no posee valores");
  }else{
  alert(values);
  }

}//end function

</script>

Para validar usa el or ||, de esta manera obtienes lo valores por ID y luego validas si son null o vacíos.

1
  • 1
    cambiado el operador logico. he editado con las modificaciones el 24 abr. 2018 a las 14:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.