With jQuery it is quick and easy to access and modify elements in a select dropdown box. There are of course several ways of doing thing and I will try to cover most of them here.

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:

10 Apples
5 Oranges
12 Bananes

The HTML-code for the dropdown is where basic:

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

When working with HTML Forms, it can in some situations improve the usability of the site, if the content of elements can change and reflect the options, that the visitor made in the previous fields.

The most common form element are input, checkbox, radio buttons, textarea and dropdown boxes and I will try to cover them all, even though the code might be the same or very much alike.

Input boxes

Fetching content is done with:

// fetching the value
$("#inputbox").val();

Try it:
Make a popup with the contents

Setting new content is done with:

// setting a new value
$("#inputbox").val("We have now changed the text");

Try…

I’ve been experimenting with some iframe-manipulation with jQuery, but this was not as easy as I have hoped for. There is not much help on jquery.com and a Google search just found others with the same kind of problem.

My setup is very basic. An iframe loading a page like this

<iframe name="framename" id="myframe" src="mypage.html"></iframe>

In the page where this iframe is being loaded, I have included the jquery.min.js and an extra .js-file for my code.

First attempt was to try the examples found on Google. For testing purposes I wanted to set a red background color on every <div> inside the iframe.

var frame…

I previously posted some info about plotting data with jQuery and Flot and I have now set up a small demonstration:

The data value below are 100% random generated numbers, but they will simulate data from a database (or anything else for that matter). It consists of an array, where the first parameter the a Unix timestamp (multiplied by 1000) and the second parameter is the value to be drawed.

Generate a list of numbers
Push the generate button to get a new dataset.

You can also try to change some of the values, to see that happens. Just push the update button below,…