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
I have also created an example * Package *.
Will hopefully get a demo up online soon as well.
