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
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
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 »</a>
<a href="JavaScript:void(0);" id="btn-remove">« 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>
$('#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();
});
});
});
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 »</a>
<a href="JavaScript:void(0);" id="btn-remove">« 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
Suscribirse a:
Entradas (Atom)

