Mostrando entradas con la etiqueta JQuery. Mostrar todas las entradas
Mostrando entradas con la etiqueta JQuery. Mostrar todas las entradas

domingo, 16 de agosto de 2015

Ordenar alfabéticamente un select con jQuery

Si estas necesitando una función que actualice alfabéticamente un SELECT HTML, tu solución es utilizar esta función:

<script>
    function ordenarSelect(id_componente)
    {
      var selectToSort = jQuery('#' + id_componente);
      var optionActual = selectToSort.val();
      selectToSort.html(selectToSort.children('option').sort(function (a, b) {
        return a.text === b.text ? 0 : a.text < b.text ? -1 : 1;
      })).val(optionActual);
    }
    $(document).ready(function () {
      ordenarSelect('selectPaises');
    });
 </script>

Referencia original:
https://gist.github.com/jomasero/5853295

sábado, 15 de agosto de 2015

Selección de dos (2) listas HTML con jQuery

Cuando necesites desarrollar una funcionalidad web, en donde necesites dos listas multiples, y el objetivo sea pasar un ITEM de una lista a otra, checate éste código que está buenisimo para esa tarea.

Formulario HTML:

<form>
  <fieldset>
    <select name="selectfrom" id="select-from" multiple size="5">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
    </select>
    <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
    <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>
    <select name="selectto" id="select-to" multiple size="5">
      <option value="5">Item 5</option>
      <option value="6">Item 6</option>
      <option value="7">Item 7</option>
    </select>
  </fieldset>
</form>

jQuery / JavaScript (js):

$(document).ready(function() {
    $('#btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
});


Link de ejemplo funcionando:

Referencia original:

domingo, 19 de abril de 2015

Insertar JQuery con la consola de Chrome

Si deseamos usar las funciones de JQuery en cualquier página usando la consola de Chrome debes insertar el siguiente código en la consola

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();


Si te da error (como en la imagen) intentalo de nuevo

y Listo, ya puedes llamar funciones de JQuery en esa página