jQuery: change selectable dropdown options based on radio button selection
<p>I have a php web form, when user selects a radio button, I want only certain options to be available in the dropdown.  So for example, if I select <strong>House</strong> from my radio group, I only want the user to see the <strong>House1</strong>, <strong>House2</strong> and <strong>House 3</strong> options in the dropdown.  </p>

<p>Is that possible using jquery?   If so, how would i code this?</p>

<p><strong>jsFiddle here:</strong> <a href="http://jsfiddle.net/justmelat/kkk7J/" rel="nofollow">http://jsfiddle.net/justmelat/kkk7J/</a></p>

<p><strong>html here:</strong> </p>

<pre><code>&lt;form method="post"&gt;
    &lt;fieldset id="Group1" name="Group1"&gt;
    &lt;legend&gt;Group box&lt;/legend&gt;
    &lt;input id="Radio1" name="Radio1" type="radio" value="House" /&gt;House&lt;br /&gt;
    &lt;input id="Radio1" name="Radio1" type="radio" value="Condo" /&gt;Condo&lt;br /&gt;
&lt;input id="Radio1" name="Radio1" type="radio" value="Boat" /&gt;Boat&lt;br /&gt;
    &lt;/fieldset&gt;&lt;br/&gt;&lt;br/&gt;

    &lt;fieldset id="Group2" name="Group2"&gt;
    &lt;legend&gt;Group Options&lt;/legend&gt;
    &lt;select id="Select1" name="Select1"&gt;
    &lt;option value="HO-House 1"&gt;House 1&lt;/option&gt;
    &lt;option value="HO-House 2"&gt;House 2&lt;/option&gt;
    &lt;option value="HO-House 3"&gt;House 3&lt;/option&gt;
    &lt;option value="CO-Condo 1"&gt;Condo 1&lt;/option&gt;
    &lt;option value="CO-Condo 2"&gt;Condo 2&lt;/option&gt;
    &lt;option value="CO-Condo 3"&gt;Condo 3&lt;/option&gt;
    &lt;option value="BO-Boat 1"&gt;Boat 1&lt;/option&gt;
    &lt;option value="BO-Boat 2"&gt;Boat 2&lt;/option&gt;
    &lt;option value="BO-Boat 3"&gt;Boat 3&lt;/option&gt;

    &lt;/select&gt;&lt;/fieldset&gt;&lt;/form&gt;
</code></pre>

<p>Thank you in advance.</p>
