Tag Archives: list

How to Group Options in a Select Dropdown List CodeUnit 05 OCT 2011

The classic HTML select dropdown list box has been with us for a long time, consisting of a container <select> tag which in turn contains a number of <option> tags which make up the list items which the user can then choose one from.

If you have a number of options which can be logically grouped, then there is a further tag that you can make use of, namely the <optgroup> tag. This allows you to group related options by placing them in the <optgroup> container, which coincidently has a non selectable label to make the various group definitions easy to see in the eventual drop down list.

In practice, your HTML would look like this:

<select>
 
<optgroup label="Swedish Cars">
   
<option value="volvo">Volvo</option>
   
<option value="saab">Saab</option>
 
</optgroup>
 
<optgroup label="German Cars">
   
<option value="mercedes">Mercedes</option>
   
<option value="audi">Audi</option>
 
</optgroup>
</select>

Which would translate to this on your web page:

Supported by all major browsers, it certainly is a useful little tag to keep in the back of your mind. If you want more information on the <optgroup> tag, why don’t you pay a visit here?

Ubuntu Terminal: How to Pause ls Listing CodeUnit 17 AUG 2011

To list the files and folders of a directory while running around in an Ubuntu terminal you use of course the classic ls list command. But what if the list it returns is particularly long? Is there a way to pause a ls listing so that you can follow what is going on?

The easiest way to achieve this is by piping the results of the ls command through to the classic more or newer less command. In practice:

ls -lh | less

Now the ls command will begin scrolling through all the files and folders in the selected directory until the page fills. From this point you can use the up or down arrow to either scroll backwards or forwards, of the page up/page down keys to hurry things up a bit. Pressing q will quite the operation.

Nifty.

jQuery: Change the Selected Index of a Dropdown List CodeUnit 22 OCT 2010

To change the selected value, or selected index if you will, of a dropdown list using jQuery is not particularly difficult.

The classic method to achieve this is to simply set the dropdown’s value to a value already contained in the list using val(). (Of course this does require that the specified value is actually in the list, either specified as the value of an option or the option text itself!)

Given:

<select name=”testselect” id=”testselect”>
<option>Value 1</option>
<option>Value 2</option>
</select></div>

We can force the selection of the second option with:

$('#testselect').val('Value 2');

Alternatively, now that the jQuery bug has been fixed, you could also set the selectedIndex attribute of the dropdown list like so:

$("#testselect").attr('selectedIndex', 1); 

And now you know! :)

Ubuntu: Nicest Way to List a Folder’s Contents from the Terminal CodeUnit 06 AUG 2010

This short little note is intended entirely for my own usage because believe it or not, I am somehow forever forgetting the switches needed to make the bog standard list (ls) function output something that I can easily ready.

ls -l -h -a

There. That will help me in the future I’m sure!

In case you are wondering which switches I have now employed, the -l indicates a long listing, in other words all files and folders are listing one below the other, with a complete set of attribute data next to the file name. The -h forces a human readable print out of the file size variable – in other words 1024 will become 1K. Finally the -a simply forces ls to show us all hidden files and folders.

Truly, I feel like an idiot for even recording this! (shame)

Remove all Listbox and Dropdown List Items with jQuery CodeUnit 27 FEB 2010

I’ve said it once and I’ll say it a million times over and again, the jQuery javascript library is simply fantastic. Today’s little code snippet is going to look at removing all the options from a select dropdown list or listbox, on the fly and using jQuery.

To get this little trick working, we are going to be making use of the remove() function that allows us to strip the target out of the pages DOM, essentially removing it from view and access.

In order to do this, we will construct a selector that will locate the target list using its ID value and then filter it down to all of its option children. Traversing through each option using the handy each() function, we will then apply a remove() call, essentially dropping that specific option out of the list, and in the end, leaving us with an empty <select> construct. Nice.

So the snippet to do this then would look a little something like this:

$('#selectlist option').each(function(i, option){ $(option).remove(); });

You can probably simplify the above by shortening the call logic and letting jQuery handle all the internals for you, but leaving it in the form that the example is currently in shows you exactly step for step how we are setting about achieving our desired empty state.

Magic I tell you.