jquery: Change available dropdowns within if statement
<p>I have a variation of this working for one client, thanks to the experts on stackflow, but for another client I need something similar, yet different. Because of things that will happen later in the code, I need to use an "If Statement", but I can't this to work:</p>

<p>I just want the code below to >>, if the value of the radio select = "House", run this code which looks to see if "House" is part of the values in the dropdown, if so, show only those values in the dropdown.  Same with Boat, Condo, so on.</p>

<p>What am I doing wrong here?</p>

<p>Any help, greatly appreciated.</p>

<p><strong>jsFiddle here:</strong> <code>http://jsfiddle.net/justmelat/kkk7J</code>/</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><strong>​javasript here:</strong></p>

<pre><code>function whichTypeChange()
    {
//other stuff going on here
var $typeVal = $("input[name=Radio1]:checked").val();
var oldoptions = "";
var oldoptions = [];

if($typeVal ==  "House")
           {

                $("#Select1").append(oldoptions);
                oldoptions = $("#Select1 option:not(:contains(" + ($typeVal) + "))").detach();
           }
if($typeVal ==  "Condo")
           {
                $("#Select1").append(oldoptions);
                oldoptions = $("#Select1 option:not(:contains(" + ($typeVal) + "))").detach();
           }
if($typeVal ==  "Boat")
           {
                $("#Select1").append(oldoptions);
                oldoptions = $("#Select1 option:not(:contains(" + ($typeVal) + "))").detach();
           }

//other stuff going on here
   }​
</code></pre>

<p><strong>======================================
ok, i am digging myself into a deeper hole.
I am working on the actual app now.  The code is below:</strong>  </p>

<p>As others have mentioned I need to use the detach function mainly to make this work in IE, but values within the dropdown are not displaying/not display as they should - can anyone see my error?  Thank you in advance.</p>

<pre><code> typeVal = $("input[name=6535]:checked").val(); //radio buttons
    var jobTypeFld_DD = "";
    jobTypeFld_DD = $('#3547'); //dropdown field
    var optionInDD = []; //array to hopd dropdown options
    optionInDD = jobTypeFld_DD.find('option'); //use this for something else
    optionInDD2 = jobTypeFld_DD.find('option'); // cache all options on page load  
    var visibleItems = "";

if (typeVal == "Art")
         {
         $('fieldset#section-417').show();
         thisval = 'Art -';
         visibleItems = optionInDD2.filter('option[value*=' + thisval + ']'); // options to show
     optionInDD2.not(visibleItems).detach(); // remove all options
         optionInDD2.append(visibleItems); // add options to show
         }
</code></pre>
