jQuery: working with select options
Following my recent post on my rolechanger module, I started delving into how to provide functionality with the resulting dropdown box that the module provides. I wanted to provide all functionality through javascript and have included a rolechanger.js file for this purpose. However I found a few quirks while working with jQuery and the select element.
I started out with a .change() on the select element and drilled down through the .children() looking for [@selected]. However, thought this worked fine in IE, Firefox did not pick this up at all. I saw in the jQuery issues that this had been fixed, but evidently not for the release that ships with Drupal. Here's the resulting code for the IE portion:
// ie doesn't pick up the option.click, so we'll have to use the select.change
$('#edit-role-changer').change(function(){
// get rid of select box
$('#edit-role-changer').hide();
// show the chosen role as static text
// NOTE: FF doesn't pick up [@selected]
$('#role').html($(this).children("[@selected]").text()).show();
// provide a change link
$('#role-change-back').show();
});
Firefox was actually a little easier to code for, since I found that it would pick up a .click() on the option element. So the resulting code for Firefox is this:
// provide action for an option change
$('#edit-role-changer option').click(function(){
// get rid of select box
$('#edit-role-changer').hide();
// show the chosen role as static text
$('#role').html($(this).text()).show();
// provide a change link
$('#role-change-back').show();
});
Since Firefox does pick up the .change() function that is on the select element that is used for IE, I then had to do a browsers detection, which jQuery makes simple as pie with $.browser. Here is the resulting full code:
// see which browser we're working with
if ($.browser.msie) {
// ie doesn't pick up the option.click, so we'll have to use the select.change
$('#edit-role-changer').change(function(){
// get rid of select box
$('#edit-role-changer').hide();
// show the chosen role as static text
// NOTE: FF doesn't pick up [@selected]
$('#role').html($(this).children("[@selected]").text()).show();
// provide a change link
$('#role-change-back').show();
});
}
else {
// provide action for an option change
$('#edit-role-changer option').click(function(){
// get rid of select box
$('#edit-role-changer').hide();
// show the chosen role as static text
$('#role').html($(this).text()).show();
// provide a change link
$('#role-change-back').show();
});
}
Happy jQuerying!
Comments
What about...
$('#edit-role-changer option:selected').val();
M.
Just what I was looking for!
This helped me immensely! Thank you for the post. My poor wall, I don't think it could've taken much more banging from my head.
What worked for me...
What worked for me... $('#myselect').val();
Example:
<script>
function changeSelect() {
var num_selected = $('#myselect').val();
// do stuff
}
</script>
HTML STUFF...
<select id="myselect" onchange="changeSelect()">
<option>xxx</option>
...
</select>
This worked for me in IE6 and Firefox2.
Cheers,
.dave.
I forgot to mention, I am
I forgot to mention, I am using jQuery1.2 in my example.
Cheers,
.dave.
code
great works I want to learn javascript but ı havent got any time
Oyun oyna
Playgames