select

Toggle radio buttons by clicking the label

I’ve seen a few methods of this using over-elaborate JavaScript, when its really not necessary.

All you need to do is wrap the <input with a <label – as a label will¬†inherently¬†become a ‘clicky’ for its children:

<label><input type="radio" name="radio-option" value="cake" />cake</label>
<label><input type="radio" name="radio-option" value="biscuits" />biscuits</label>

 

Easy

Sorting a SELECT with JQuery

Just a simple function to sort an already populated list. Obviously it would be easier to sort before populating, but there are the odd occasion where this is more complicated than you thought.

Requirements : JQuery

var selectOptions = $("#selectId option");

Then, we just run the sort command on the options array – and this easily sorts the items.

selectOptions.sort(function(a, b) {
    if (a.text > b.text) {
        return 1;
    }
    else if (a.text < b.text) {
        return -1;
    }
    else {
        return 0
    }
});

Then, at the end empty the select object and re-append the sorted options array

$("#selectId").empty().append(selectOptions);

Note. I just found a problem with this. If you have already selected an option, that selection will be lost unless you save the selection value before sorting and replace it at the end:

var selectedOption = $('#selectId').val();

And then to restore it

$('#selectId').val(selectedOption);