I have a DIV with a list of radio buttons and a 'selected search' area (a <span>). When clicking on the 'selected search' area, a drop down layer comes out and has the DIV with the list of radio buttons. When a radio button is selected, the 'selected search' area is updated with that radio button's text and the drop down layer collapses/disappears.

Here's my HTML structure:

<div class="radio-btns"><span class="selected-search">A</span>
 <div class="radio-btns-wrapper">
  <label><input type="radio" value="a" id="a" checked>A</label>
  <label><input type="radio" value="b" id="b">B</label>
  <label><input type="radio" value="c" id="c">C</label>
  <label><input type="radio" value="d" id="d">D</label>
 </div>
</div>

Any idea how to accomplish this with jQuery? Any help will be greatly appreciated.

Thanks.

** EDIT **

Since I asked this question back in 2010 I have now improved in jQuery a bit, so here's a revised markup since the above one isn't ideal.

New HTML structure:

<a href="#" class="selected-search">A</a>
<div class="radio-btns-wrapper">
    <label><input type="radio" value="a" id="a" name="radio" checked>A</label>
    <label><input type="radio" value="b" id="b" name="radio">B</label>
    <label><input type="radio" value="c" id="c" name="radio">C<开发者_如何转开发/label>
    <label><input type="radio" value="d" id="d" name="radio">D</label>
</div>

jQuery script:

This is an improvement on @Greg's answer below:

//If JS is available, hide the radio buttons container
$(".radio-btns-wrapper").hide();

//DIV with radio buttons will slide down when clicking on .selected-search
//The default action on the link <a> is removed (preventDefault();) to avoid having the page jump to the back top
$(".selected-search").click(function (e) {
    $(".radio-btns-wrapper").slideDown();
    e.preventDefault();
});
//Click on radio button and have target text update with radio button's text
$("input[type=radio]").click(function () {
    // Alter the text of the span to the text of the clicked label
    $(".selected-search").text($(this).parent().text());
    // Now hide the radios
    $(".radio-btns-wrapper").slideUp();
});

And since the link to demo in the selected answer doesn't work anymore, I created my own demo. You can see it here: http://jsfiddle.net/rzea/vyvLvgkh/4/

Here's a JsFiddle with an example:

http://jsfiddle.net/g105b/VHBkP/ (demo appears to have been removed from jsfiddle.net)

Here's a link to a working demo: http://jsfiddle.net/rzea/vyvLvgkh/5/ - See edit above for improved markup and new script.

$(".radio-btns").click(function() {
    $(".radio-btns-wrapper").toggle();
});

$("input[type=radio]").click(function() {
    // Alter the text of the span to the text of the clicked label.
    $(".selected-search").text($(this).parent().text());
    // Now hide the radios.
    $(".radio-btns-wrapper").hide();
});

this should get you on your way:

$('span.selected-search').click(function(){
    this.next('div.radio-btns-wrapper').toggle();
});

Check out the docs for options to toggle: http://api.jquery.com/toggle/

Also note that this will only work if the span you want to show occurs immediately after the selected-search span