Matt’s Blog

I have recently had a scenario where i have needed to set the selected=”selected” parameter of a dropdown box using JQUERY based on data from a database.

The scenario:

When the user decides to edit a job I need the current data to fill in the text boxes and other input fields. One of which is a dropdown list. I need to make sure that the selected option is the option that is saved in the database.

For example a dropdown box of job types:

<select id="jobtype">
 <option value="1">Job Type 1</option>
 <option value="2">Job Type 2</option>
 <option value="3">Job Type 3</option>
 <option value="4">Job Type 4</option>
</select>

Then the JQUERY to loop through and add the “selected” attribute to appropriate option:

$("#jobtype option").each(function(i){
 if($(this).val() == data.jt){
  $(this).attr("selected", "selected");
 }
});

Note: data.jt is response from an $.ajax call in JSON format.

What it does:

We use the .each function to loop through all of the options within the jobtype select dropdown until the value of on of the options equals the value of data.jt.

Example:

If    data.jt = 2

Then the select code would end up looking like this:

<select id="jobtype">
 <option value="1">Job Type 1</option>
 <option value="2" selected="selected">Job Type 2</option>
 <option value="3">Job Type 3</option>
 <option value="4">Job Type 4</option>
</select>

I’m just starting out with JQUERY/JQUERY UI and have been meaning to start using them for a long time but haven’t had the time to really have a play. I’ve finally found some time and from using the documentation on the JQUERY site i managed to come up with a font slider which increases/decreases the font size of all the text within my wrapper div(could be any element including the body if you wanted) 1em at a time. Here is the code:

The XHTML

<div id="wrapper">
  <div id="fontslider" class="font-slider" style="margin:10px;">
	<div class="ui-slider-handle"></div>
  </div>
</div>

The CSS

body {
	font-size:small;
}
.font-slider {
 width: 200px;
 height: 23px;
 position: relative;
 background-repeat: no-repeat;
 background-position: center center;
}
.ui-slider-handle {
position: absolute;
 z-index: 1;
 height: 23px;
 width: 12px;
 top: 0px;
 left: 0px;
 background-image: url(slider-handle.gif);
}
.ui-slider-handleactive { border: 1px dotted black;  }
.ui-slider-disabled .ui-slider-handle {
 opacity: 0.5;
 filter: alpha(opacity=50);
}
.ui-slider-range {
 position: absolute;
 background: #50A029;
 opacity: 0.3;
 filter: alpha(opacity=30);
 width: 100%;
 height: 100%;
}
.font-slider {background-image: url(slider-bg-1.png); }

The JS

$(document).ready(function(){
 $("#fontslider").slider({
		min: '1',
		max: '10',
		startValue: 1,
		steps: 10,
		change: function(e, ui){
			$("#wrapper").css("font-size", + ui.value +"em");
		}
	});
});

you will need to make sure you include the the jquery library, ui.core.js and ui.slider.js files from

http://jquery.com

http://ui.jquery.com

I have also created an example * Package *.

Will hopefully get a demo up online soon as well.

JQUERY devs release JQUERY 1.5.1 which fixes more than 50 known issues within JQUERY. This release note was posted by the JQUERY team on the 27/06/2008. The full post can be read on the JQUERY blog here: http://jquery.com/blog/2008/06/27/jquery-ui-151/

http://ui.jquery.com/