Tabs are not good for bookmarking

HOWEVER – the content is not than userfriendly is you would like the users to bookmark the page. When a page is bookmarked you would expect the bookmark would lead you to the same content as when it was bookmarked. So what to do, when a tab is loaded on the fly or if is just a div or something else, being changed from hidden to visible?

Layout:

HTML code:

<div class="tablayout">
  <div class="tabs">
    <div class="tab1">Tab 1</div>
    <div class="tab2">Tab 2</div>
    <div class="tab3">Tab 3</div>
  </div>
  <div class="tabcontent">
    <div class="tab1">Tab content 1</div>
    <div class="tab2">Tab content 2</div>
    <div class="tab3">Tab content 3</div>
  </div>
</div>

jQuery tab code:

$(document).ready(function() {

    $(".tab1").click( function() {
        $(".tabs div").removeClass("selectedtab");
        $(this).addClass("selectedtab");
        $(".tabcontent div").hide();
        $(".tabcontent .tab1").show();
        $(".tabcontent .tab1").addClass("selectedtab");
    });
    $(".tab2").click( function() {
        $(".tabs div").removeClass("selectedtab");
        $(this).addClass("selectedtab");
        $(".tabcontent div").hide();
        $(".tabcontent .tab2").show();
        $(".tabcontent .tab2").addClass("selectedtab");
    });
    $(".tab3").click( function() {
        $(".tabs div").removeClass("selectedtab");
        $(this).addClass("selectedtab");
        $(".tabcontent div").hide();
        $(".tabcontent .tab3").show();
        $(".tabcontent .tab3").addClass("selectedtab");
    });

    $(".tabs .tab1").click();
});

I know the layout is ugly. I know the tab function can be done better and smarter. This is not what this post is about.

The example shows one way of making a tab function and this is all nice and great. But it does not allow the user to bookmark the page and expect the page to show to correct tab when returning at a later time.

Tabs that are cool and ready for the archive

This is where we can use the BBQ plugin by Ben Alman (URL: http://benalman.com/projects/jquery-bbq-plugin/).
Download it and include it on your page and you are ready to got. Well. Almost.

Bookmarkable tabs with jQuery and the nice and juicy BBQ plugin:

HTML Code:

<div class="tablayoutbbq">
  <div class="tabs">
    <div class="tab1"><a href="#tab1">Tab 1</a></div>
    <div class="tab2"><a href="#tab2">Tab 2</a></div>
    <div class="tab3"><a href="#tab3">Tab 3</a></div>
  </div>
  <div class="tabcontent">
    <div class="tab1">Tab content 1</div>
    <div class="tab2">Tab content 2</div>
    <div class="tab3">Tab content 3</div>
  </div>
</div>

As you can see the HTML code is almost the same. Only thing changed is that there is added a link to the tabs. This links add the hash-value to the URL and this is the value we can use. When a user bookmarks the page with a hash-value in the url, all we have to do is read the value and “click” the matching tab.

jQuery code

    $(window).bind( 'hashchange', function(e) {
        var url = $.param.fragment();
        $(".tablayoutbbq .tabs ."+url).click();
    });

    $(window).trigger( 'hashchange' );

The end

There you go. Tabs that can be bookmarked.

Over and out. Comment if you like.

Thanks to Ben Alman for the great BBQ-plugin.

3 Step guide into installing a new Google search engine in your Firefox or Internet Explorer browser.

I am using Firefox as my primary browser for many different reasons. I think it is doing a good job and I like the way it is possible to extent its features by installing new plugins.

However – there is one thing, that has bothered me for a long time now. There is no simple way (as far as I have found) to change which country the internal google search uses. The default is google.com and there is no obvious way of changing this.

The only way I have found to do this, is either by editing some xml configuration files, but this does not seem like “the right way” to do this.

So I decided to make my own search engine thingy and have afterwards made this small tool below for easier updating.

There is 3 steps into installing a new google search engine.

Step 1 – Choose which google engine to install
Step 2 – Install the new search engine in the top search field
Step 3 – Select the new search engine

Step 1:

If you would like to define your own search parameters sent to google, simply copy/paste your search url below:

Step 2:

Go to the google toolbar in your browser (this is tested with Firefox and Internet Explorer) and there will be an option, where it is possible to install the new search engine:

I’m currently browsing from a Firefox with Danish localization, but it will of course say “Add” or something similiar in the language you are running.

Click the install section and we are ready to go.

Step 3:

The final step is to select the newly installed search engine.

That’s it

I hope this small tool is usefull to you. Please post a comment below.

My setup

Server:
Debian Lenny (IP 192.168.1.123)
Standard NFS-server
A simple export setup (1 share) /mnt/storage

Client:
Ubuntu 10.04
Autofs 5.0.4-3.1ubuntu5
Autofs5 5.0.4-3.1ubuntu5

Autofs configuration

The first problem is this:

syntax error in nsswitch config near [ syntax error ]

This error message appears in my message log file on my client after installing Autofs. No configuration has yet been changed. So this is by default not working.
There are, as far as I have tested, two workarounds:
1: outcomment the line with ‘+auto.master’ at the bottom of the /etc/auto.master
2: insert a line with ‘automount:files’ in the /etc/nsswitch.conf

Now – restart autofs and verify that the error message is gone:

#sudo service autofs restart

The Autofs setup step 1

Edit /etc/auto.master and add a line like this:

/media/nfsshares /etc/auto.nfs

This will tell autofs to create a folder named nfsshares inside the /media/ folder and that there are further configuration entries in the file /etc/auto.nfs

The Autofs setup step 2

Create a file called auto.nfs in the /etc/ folder and edit it with your favorite editor:

# vim /etc/auto.nfs

Enter one or more shares like this:

myservershare 192.168.1.123:/mnt/storage

Save the file and we are done.

Starting and testing Autofs

All options are now created, so lets (re)start Autofs and move on:

# service autofs restart

The Autofs is now running and we should see a newly created folder inside your /media directory:

# cd /media

# ls -al
...
drwxr-xr-x  3 root root     0 2010-07-15 21:22 nfsshares
...

Try to change directory to the nfsshares folder:

# cd nfsshares

# ls -al

What the …. It’s empty. Where is the myservershare folder? Don’t worry, just try and cd’e into the folder:

# cd myservershare

Well well well. The directory is now accessible and visible.

If you would like the directory structure to be visible at all times – even at first entry – add the ghost parameter to the auto.master like this:

/media/nfsshares /etc/auto.nfs --ghost

The Autofs is now up and running.

I have a setup, where I with the dump/restore utilities on my Debian box are running a set of scheduled backup jobs. To make it short, I use the dump utility to backup the different mount points on my system.

How to backup with dump

To backup the root (/) partition I run a command like this:

dump -0 -u -f - / | gzip > /mnt/backup/root-gziped.gz

This runs the dump utility with a set of options (please referrer to the man page for further options). -0 means a level 0 backup, -u updated a log file with the date of the last update and -f outputs everything to standard output. Afterwards the gzip command will pack the dump data and store it in a file.
This is the way I do it. Feel free to use other options.

How to restore a backup made with dump

If your hard drive is failing or perhaps running low on disk space and you need to upgrade it, one way is to do it by restoring from a backup.

What you need, is some kind of running Unix system where you can access the new hard drive and you also need access to the backup file. I have plugged my new drive in another Unix machine as a secondary drive. In this case I am using an Ubuntu 10.4 workstation, where I have installed the dump utility.

Partitioning the new hard drive

To get access to the new drive we need to partition it first. I am using the GParted program in my Ubuntu and have created a partition layout like this:

NB. This screenshot shows disk usage, because the screenshot it taken after a successful restore.

Mounting the new layout

Before we can start the restore, we need to mount the new partition. This is done from the console (terminal) like this:

#mkdir /media/root

#mount /dev/sdb1 /media/root

NB. Please note that I am using sdb (and not sda like the screenshot above shows). This is because the hard drive is not the system drive yet.

The hard drive is now mounted in the /media/root directory and we can begin the restore.

Restoring data

I am using the restore command with the interactive shell to select the files and directories that I need to restore.

# gunzip root-gziped.tar.gz  | restore -ivf -
Verify tape and initialize maps
Input is from a local file/pipe
Input block size is 32
Dump   date: Thu Jul  8 21:35:37 2010
Dumped from: the epoch
Level 0 dump of / on myserver.mynetwork.com:/dev/sda1
Label: none
Extract directories from tape
Initialize symbol table.
restore >

At the prompt it is possible to browse the media with the normally used ‘cd’ and ‘ls’ commands. When we have found what we need we can go ahead a add it to the queue. To help the restore utility getting the folder permissions correct I usually runs the command setmodes as the first thing.

restore > setmodes
Set directory mode, owner, and times.
restore > add boot
restore > add bin
...
...
restore > extract

The ‘add’ command adds folders or files to the queue and the extract command will start the restoring process.

When this is finished you will be asked if you want to set folder permissions on ‘.’. Answer Yes here.

...
Add links
Set directory mode, owner, and times.
set owner/mode for '.'? [yn] y
restore >

This is it. The files are now restored and the hard drive is almost ready to begin its new life.

Installing grub boot loader

Before the disk can boot up and start the operating system, it needs to have a boot manager. My previously system was using Grub, so I will just reinstall this on the new drive. For this job, we can use an Ubuntu Live cd-rom and boot this.

When this is done and the Ubuntu Live version has booted we need to get access to the new drive (now known as /dev/sda).

Open up a terminal window and enter:

#mkdir /mnt/root

#sudo mount /dev/sda1 /mnt/root

#sudo chroot /mnt/root /bin/bash

#grub-install /dev/sda

These commands will create a mount point, mount the new drive, get root access to the new content and install a grub boot loader on the new.

Power off the machine, pull out the hard drive and install it in the old server again.

To get this working, you need two systems – a server and a client.

Installing the NFS Server

I have en Debian server running, where I would like easy access to some of the folders from my workstation. To do this, I will install the nfs-kernel-server and the portmap packages like this:

# aptitute install nfs-kernel-server portmap

The NFS server and the portmap service is now installed and up and running.

Which folders to share

To defined which folder we want to share and to which client, we have to take a look at the /etc/exports file. So open /etc/exports in you favorite editor and insert a line like this:

/home/js 192.168.1.2(rw)

This tells the NFS service, that I want to share my home folder /home/js to the client at IP 192.168.1.2 with read-write (rw) access.

To reload the defined exports I have to run the exportfs command like this:

# exportfs -a

That’s it – we done here

Access the NFS share from an Ubuntu Client

I am using Ubuntu 10.4 as my primary workstation, so I would like to access my home folder on my server. To do this, I have to install the nfs-common package, so I will select my System menu, goto Administration and click on Synaptic Package Manager. Here I will find the nfs-common package and install it as shown here:

All that’s left is to mount the share. I will just enter the share to my fstab file and it will then be ready to mount (and automatically mounted on the startup). Again – use your favorite editor to add a line to the /etc/fstab:

192.168.1.1:/home/js /media/serverhome   nfs rw 0 0

This will let the system mount the /home/js share located on the server with the IP 192.168.1.1, into the local folder /media/serverhome with read-write (rw) access.

When this is done, we must create the folder /media/serverhome on the locale machine and then, either reboot the system or manually mount the share like this:

# mount /media/serverhome

And we are done.

Installing a fresh Debian 5.0

I am using Virtual Box on my Ubuntu Workstation. This gives me the option to install the OpenQRM in a closed internal network, without having access to new hardware.

To start with I am doing a fresh installation of Debian 5.05 without any additions. No server software, no desktop software, nothing. Just like this:

Installing the basic packages for building the OpenQRM source

Now I have the most basic Debian installation. The OpenQRM will be installed from the svn repository, so I have to install the subversion and make programs. I will also install the mysql-server-5.0 and postfix manually before starting, as it seems something gets messed up if the OpenQRM installation handles these two:

root@openqrm:~# aptitude install subversion make postfix mysql-server-5.0
Reading package lists... Done
Building dependency tree
Reading state information... Done
Reading extended state information
Initializing package states... Done
Reading task descriptions... Done
The following NEW packages will be installed:
  bsd-mailx{a} ca-certificates{a} file{a} libapr1{a} libaprutil1{a} libdb4.5{a} libdbd-mysql-perl{a} libdbi-perl{a}
  libexpat1{a} libhtml-template-perl{a} libldap-2.4-2{a} liblockfile1{a} libmagic1{a} libmysqlclient15off{a}
  libneon27-gnutls{a} libnet-daemon-perl{a} libplrpc-perl{a} libpq5{a} libserf-0-0{a} libsqlite3-0{a} libsvn1{a}
  libterm-readkey-perl{a} libxml2{a} mailx{a} make mime-support{a} mysql-client-5.0{a} mysql-common{a}
  mysql-server-5.0 openssl{a} openssl-blacklist{a} perl{a} perl-modules{a} postfix psmisc{a} python{a}
  python-minimal{a} python2.5{a} python2.5-minimal{a} sgml-base{a} ssl-cert{a} subversion xml-core{a}
0 packages upgraded, 43 newly installed, 0 to remove and 0 not upgraded.
Need to get 64,1MB of archives. After unpacking 189MB will be used.
Do you want to continue? [Y/n/?] Y

During the installation of mysql-server-5.0 you will be asked to type in a MySQL root user password. I am entering ‘openqrm’ – you can choose whatever you like, as long as you can remember it later on.
The postfix packages will ask how to deliver mail from the system. This depends on your setup, but I will select the “Internet Site” option, so that the server can delivery mail directly on the internet.

Download OpenQRM from the svn repository

When this is done, the next step is the fetch the newest version from the svn repository:

root@openqrm:~# svn co https://openqrm.svn.sourceforge.net/svnroot/openqrm openqrm
...
Checked out revision 1998.

This can take a few minutes and it finishes by displaying which revision I have checked out.

Compiling the OpenQRM source

Next step is to change to the src-folder and start the code compiling by running the ‘make’ command:

openqrm:~# cd openqrm/trunk/src/
openqrm:~/openqrm/trunk/src# make
...
...

This will download and install all the needed Debian packages by itself.

Installing the OpenQRM source

To install the OpenQRM software run the ‘make install’ command, when the previously ‘make’ command has finished:

openqrm:~/openqrm/trunk/src# make install

This will copy all files to the correct positions on the system.

OpenQRM system scripts

The final installation step is to run the ‘start’ command, which activates all startup scripts and installs the last required system software:

openqrm:~/openqrm/trunk/src# make start
...

Accessing the Web interface

All software has now been installed and the final step is to prepare the MySQL-database.

This is done by accessing the OpenQRM website. My server has the IP address 192.168.1.26, so I will point my browser at http://192.168.1.26/openqrm/ and type in ‘openqrm’ in the username and password prompt.

Step 1

I am clicking ‘next’:

Step 2

I am selecting the MySQL option:

Step 3

Now enter the password for the MySQL root user and click ‘Initialyze’

All done

The OpenQRM should now be installed without any errors:

The browser will now redirect to the main screen and we are ready to go.

How to float it

Well – it can sometimes be quite difficult to understand how the float universe works. I will try to give some basic pointers and examples on the float left and float right technique and how it reacts in the layout.

The basic of id and classes

There are two ways to access HTML elements from CSS. You can either use id’s or class’es. Almost every HTML tag, if not all, allows the assignment of an id or class name. When element has an id or class, it can be accessed from CSS by using . or #.

ID are accessed with # (hash). Lets say we have a <div>-tag with the id set to mydiv:

<div id="mydiv">some content here</div>

The mydiv can then be access like this from CSS

#mydiv {
  width: 100px;
  height: 100px;
}

If we are using a class instead of an id, the code would lookup like this:

<div class="mydiv">some content here</div>

And

.mydiv {
  width: 100px;
  height: 100px;
}

id’s and class’es will not be covered in more details here.

Starting point

This article will use the following HTML as a starting point. It holds a simple div-”container” with contains another 3 divs.

<div class="container">
  <div class="class1">This is the first class</div>
  <div class="class2">This is the second class</div>
  <div class="class3">This is the third class</div>
</div>

Without any CSS it would look like this:

Not really that pretty and nice as we would like it to be, right?

Basic styling

Lets do some basic styling of the above code, to better see what’s going on.

.class1 {
  width: 200px;
  background-color: light-grey;
}
.class2 {
  width: 300px;
  background-color: white;
}
.class3 {
  width: 500px;
  background-color: grey;
}

This outputs:

Okay – now we can better see the difference between the 3 divs.

Lets float it

When floating left, the selected element will be placed along the left side of the next element.
When floating right, the selected element will be placed along the right side of the next element.

Left floating the first class:

.class1 {
  width: 200px;
  background-color: light-grey;
  float: left;
}

Okay, that went kinda like expected. Although – the class2 has a width set to 300px, so why does it wrap like that, when it should have enough space – the class1 is 200px and the class3 is 500px, so class1 and class2 should will up the exact same space as class3 below.

This is one of those questions I used to ask a friend of mine over at spiced2.com and he always answered “when in doubt, float left”. Ok then. Lets float class2 left as well:

.class1 {
          width: 200px;
          background-color: #DEDEDE;
          float: left;
}
.class2 {
          width: 300px;
          background-color: #006699;
          float: left;
}
.class3 {
          width: 500px;
          background-color: #009900;
}

Now it’s a lot better, but what will happen if we try to float right?

The first class is now floating right, and is therefor aligned to the right side of class2:

.class1 {
          width: 200px;
          background-color: #DEDEDE;
          float: right;
}
.class2 {
          width: 300px;
          background-color: #006699;
}
class3 {
          width: 500px;
          background-color: #009900;
}

The next step

Lets try a bit more advanced setup, where we will wrap some text around another element. To do this we have to place one element inside another like this:

<div class="container">
  <div class="class1"> <span class="class2">This is the second class</span>This is the first class This is the first class This is the first class This is the first class This is the first class This is the first class </div>
  <div class="class3">This is the third class</div>
</div>

To get the text in class wrapped around the class2 element, we have to set a float right on the class2. This makes it right aligned, and the text in class1 will then wrapped around it.

The CSS looks as follows:

.class1 {
          width: 500px;
          background-color: #DEDEDE;
          float: left;
}
.class2 {
          width: 200px;
          background-color: #006699;
          float: right;
}
.class3 {
          width: 500px;
          background-color: #009900;
}

Last words

That it. A very small and basic intro tutorial on the mysterious left and right floating. Enjoy.

Create a tabel

First we have to create a new database called ‘articles’ and it will contain 2 fields – a numeric article id and text field for the article content. This is done with the CREATE TABLE-command:

CREATE TABLE `articles` (
`article_id` INT NOT NULL ,
`article_content` TEXT NOT NULL
)

Running the above code will create a database called articles with two fields article_id and article_content.

The database table is now ready for use.

Inserting into a table

To insert data into to newly created database is done with the INSERT-command. When using the INSERT-command, you must specify which table the content should be inserted to and which fields to insert it into.

The INSERT-command is used with this syntax:

INSERT INTO `table` (fields) VALUES (values);

table, fields and values must be replaced with the appropriate names, like this:

INSERT INTO `articles` (`article_id`, `article_content`) VALUES ('1', 'First article...');

This will insert an article to the articles-table, with an article id value of ’1′ and a content ‘First articles…’.

Let insert a couple more articles:

INSERT INTO `articles` (`article_id`, `article_content`) VALUES ('2', 'Second article...');
INSERT INTO `articles` (`article_id`, `article_content`) VALUES ('3', 'Third article...');

Selecting from a table

The articles-table is now holding 3 articles with id 1, 2 and 3. To retrieve article information from the table, we have to use the SELECT-command.

Selecting content from the database is done by using this syntax:

SELECT `field` FROM `table` WHERE search;

Now – let select the article content for article no. 2:

SELECT `article_content` FROM `articles` WHERE article_id='2';

This will return a result set with the article content from article no 2.

Selecting from table can of course be must more advanced than this, but this will be covered in a later blog entry.

Updating a table

Now we know how to insert and select data in the database. At some point it’s often necessary to change the content of the tables. Changing values is done with the UPDATE-command.

UPDATE `table` SET `field`=`value` WHERE search;

So, to change the content of article no 3 from ‘Third article’ to ‘yet another article’ use a command like this:

UPDATE `articles` SET `article_content`='yet another article' WHERE `article_id`='3'

This will update the article_content-field to ‘yet another article’ if the article_id is equal ’3′.

Delete from table

The last command for now is the DELETE-command. This is used, when content in the database should be deleted and is used like this:

DELETE FROM `table` WHERE search;

The article no 1 is now going to be deleted and this is done with the following line:

DELETE FROM `articles` WHERE `article_id`='1';

That’s it. Article deleted.

Ending

The 5 basic SQL command has now been explained and I hope this will be useful when starting using databases. Every command can be expanded to be much more advanced than what I have shown here.

For further reading on how to create a basic login script with PHP and MySQL-database – go here

I have been working on a small project of mine and figured that the sortable widget could be a great feature. I then started to output the list and the element that should be draggable like this:

My HTML list

<ul id="sort1">
  <li>
    <div>box no 1</div>
  </li>
  <li>
    <div>box no 2</div>
  </li>
  <li>
    <div>box no 3</div>
  </li>
</ul>

My jQuery code to enable the sortable widget and for getting a serialized result when an element has been dragged around:

$(document).ready(function() {
    $("#sort1").sortable({
        opacity: 0.6,
        update: function(event, ui) {
            var info = $(this).sortable("serialize");
            $("#sort1output").html(info);
        }

    });
});

Example (try dragging a box up or down):

• box no 1
• box no 2
• box no 3

Serialized output (updated when a box is dragged):Output will be shown here

So. Nothing. No output what so ever.

I have spend several hour researching this problem, because the documentation on jqueryui.com lists that the serialize and toArray events should return output.

And then. Finaly. I stumpled upon a note regarding the id name of the element that gets dragged. I have seen no documentation about this and was quite puzzled. I digged some more into this id-hint and realized that the element that gets moved around, has to have a unique id tag ending with a number like this: “element_2″.

The working code will then be:

<ul id="sort2">
  <li id="element_1">
    <div>box no 1</div>
  </li>
  <li id="element_2">
    <div>box no 2</div>
  </li>
  <li id="element_3">
    <div>box no 3</div>
  </li>
</ul>

• box no 1
• box no 2
• box no 3

Serialized output (updated when a box is dragged):Output will be shown here

I hope this tip is helpfull.

Quicklinks:
The test setup
Get the selected value from the select / dropdown box
Set the selected value
Insert new options and values in the dropdown box
Removing an entry from the select box
Disable and enable options
The code

The test setup.

For the following examples I will use a dropdown / select box like this:

The HTML-code for the dropdown is where basic:

<select id="dropdown">
<option value="apples">10 Apples</option>
<option value="oranges">5 Oranges</option>
<option value="bananas">12 Bananes</option>
</select>

Get the selected value from the select / dropdown box.

When a value is selected, it could be nice to use the value for something and the first step to doing this, is to receive the value. This is actually very simple to do:
dropdown1:
10 Apples 5 Oranges 12 Bananes

button1: Fetch value from dropdown

Code:

    $("#button1").click( function() {
        alert("The selected value is: " + $("#dropdown1").val() );
    });

Here I have used the val()-function on the dropdown box the receive the value for the selected element and it will output the content of the “value”-parameter on the select-box.

If you would rather have the visible text (ie. 10 Apples or 5 Oranges) outputted, you will have to use the html()-function instead. It’s a bit more tricky, as you should only get the content of the selected value and not the entire select-box.
To do this, we have to do a combination like this:
button2: Fetch content from dropdown

Code:

    $("#button2").click( function() {
        var selectedvalue = $("#dropdown1").val();
        alert("The selected value is: " + $("#dropdown1 option[value="+selectedvalue+"]").html() );
    });

Another and more simple way of getting the text from the selected element could be:

    $('#dropdown1 :selected').text();

Set the selected value.

Setting the selected value is very easy. All you have to do, is use the val()-function:
dropdown2:
10 Apples 5 Oranges 12 Bananes

button3: Select ‘oranges’
button4: Select ‘bananas’

code:

    $("#button3").click( function() {
        $("#dropdown2").val("oranges");
    });
    $("#button4").click( function() {
        $("#dropdown2").val("bananas");
    });

Insert new options and values in the dropdown box.

If the content of the dropdown are depending on other fields, it is often necessary to change or insert new values to a dropdown box.
This can be done by appending new <option>-tags to the <select>-box:
dropdown3:
10 Apples 5 Oranges 12 Bananes

button5: Append a new field named ’20 Grapes’
button6: Prepend a new field named ’20 Melons’

Code:

    $("#button5").click( function() {
        // insert new option at the bottom of the dropdown box
        $("#dropdown3").append('<option selected=selected value="grapes">20 Grapes</option>');
    });
    $("#button6").click( function() {
        // insert new option at the top of the dropdown box
        $("#dropdown3").prepend('<option selected=selected value="melons">20 Melons</option>');
    });

Removing an entry from the select box.

Remove options is very easy. All you need is knowing which values to remove:
dropdown4:
10 Apples 5 Oranges 12 Bananes

button7: Remove the “10 Apples” option

Code:

    $("#button7").click( function() {
        $("#dropdown4 option[value='apples']").remove();
    });

Disable and enable options.

If some of the options in the dropdown is depending on other values, it is sometimes nice to enable and disable entries on the fly.
dropdown5:
10 Apples 5 Oranges 12 Bananes

button8: Disable the”5 Oranges” option
button9: Enable the “5 Oranges” option

Code:

    $("#button8").click( function() {
        $("#dropdown5 option[value='oranges']").attr("disabled", "disabled");
    });

    $("#button9").click( function() {
        $("#dropdown5 option[value='oranges']").removeAttr("disabled");
    });

The code.

The complete jQuery code with the above examples, can be downloaded here