jQuery: Radio button selected & <span> updates
<p>I have a DIV with a list of radio buttons and a 'selected search' area (a &lt; 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.</p>

<p><strong>Here's my HTML structure:</strong></p>

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

<p>Any idea how to accomplish this with jQuery? Any help will be greatly appreciated.</p>

<p>Thanks.</p>
