How do I remove many but not all option items from a dropdown menu using jquery?

I have two dropdown menus. The first contains certain items, that based on their selection I would like to remove about 100 of the options in the second dropdown. Is this possible in jquery, without having hundreds of lines of code removing and appending each item individually?

The code for the first dropdown is:

 <div>
    <span style="font-weight:bold;"><span>*</span> Panel Configuration<br /></span><select name="ctl00$ctl00$cph1$cph1$ctl00$ctrlProductVariantsInGrid$rptVariants$ctl00$ctrlProductAttributes$32_59" id="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_32_59">

        <option selected="selected" value="476">  One Panel - Left Side Hinge (Window Size Width 10&quot; - 37&quot;)</option>
        <option value="477">  One Panel - Right Side Hinge (Window Size Width 10&quot; - 37&quot;)</option>
        <option value="478">  Two Panel - LL Side Hinge (Window Size Width 20&quot; - 50&quot;)</option>

        <option value="479">  Two Panel - RR Side Hinge (Window Size Width 20&quot; - 50&quot;)</option>
        <option value="480">  Two Panel - LR Side Hinge (Window Size Width 20&quot; - 74&quot;)</option>
        <option value="481">  Three Panel - LLR Side Hinge (Window Size Width 30&quot; - 87&quot;)</option>

        <option value="482">  Three Panel - LRR Side Hinge (Window Size Width 30&quot; - 87&quot;)</option>
        <option value="483">  Three Panel - LTLTL Side Hinge (Window Size Width 30&quot; - 111&quot;)</option>
        <option value="484">  Three Panel - LTRR Side Hinge (Window Size Width 30&quot; - 87&quot;)</option>

        <option value="485">  Three Panel - LLTR Side Hinge (Window Size Width 30&quot; - 87&quot;)</option>
        <option value="486">  Four Panel - LLRR Side Hinge (Window Size Width 40&quot; - 100&quot;)</option>
        <option value="487">  Four Panel - LLTRR Side Hinge (Window Size Width 40&quot; - 100&quot;)</option>

        <option value="488">  Four Panel - LRTLR Side Hinge (Window Size Width 40&quot; - 100&quot;)</option>
        <option value="489">  Four Panel - RRTLL Side Hinge (Window Size Width 40&quot; - 100&quot;)</option>
        <option value="490">  Four Panel - LTLRTR Side Hinge (Window Size Width 40&quot; - 100&quot;)</option>

        <option value="491">  Six Panel - LRTLRTLR Side Hinge (Window Size Width 60&quot; - 222&quot;)</option>
        <option value="492">  Six Panel - LLTLRTRR Side Hinge (Window Size Width 60&quot; - 174&quot;)</option>
        <option value="493">  Six Panel - LTLLRRTR Side Hinge (Window Size Width 60&quot; - 174&quot;)</option>

        <option value="494">  Six Panel - RTLLRRTL Side Hinge (Window Size Width 60&quot; - 174&quot;)</option>

    </select>
</div><div>

The code for the second dropdown is:

<span style="font-weight:bold;"><span>*</span> Enter Width:<br /></span><select name="ctl00$ctl00$cph1$cph1$ctl00$ctrlProductVariantsInGrid$rptVariants$ctl00$ctrlProductAttributes$14_35" id="ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_14_35">
    <option value="133">10</option>

    <option value="134">11</option>
    <option value="135">12</option>
    <option value="232">13</option>
    <option value="233">14</option>
    <option value="234">15</option>
    <option value="235">16</option>

    <option value="236">17</option>
    <option value="237">18</option>
    <option value="238">19</option>
    <option value="239">20</option>
    <option value="240">21</option>
    <option value="241">22</option>

    <option value="242">23</option>
    <option value="243">24</option>
    <option value="244">25</option>
    <option value="245">26</option>
    <option value="246">27</option>
    <option value="247">28</option>

    <option value="248">29</option>
    <option value="249">30</option>
    <option value="250">31</option>
    <option value="251">32</option>
    <option value="252">33</option>
    <option value="253">34</option>

    <option value="254">35</option>
    <option value="255">36</option>
    <option value="256">37</option>
    <option value="257">38</option>
    <option value="258">39</option>
    <option value="259">40</option>

    <option value="260">41</option>
    <option value="261">42</option>
    <option value="262">43</option>
    <option value="263">44</option>
    <option value="264">45</option>
    <option value="265">46</option>

    <option value="266">47</option>
    <option value="267">48</option>
    <option value="268">49</option>
    <option value="269">50</option>
    <option value="270">51</option>
    <option value="271">52</option>

    <option value="272">53</option>
    <option value="273">54</option>
    <option value="274">55</option>
    <option value="275">56</option>
    <option value="276">57</option>
    <option value="277">58</option>

    <option value="278">59</option>
    <option value="279">60</option>
    <option value="280">61</option>
    <option value="281">62</option>
    <option value="282">63</option>
    <option value="283">64</option>

    <option value="284">65</option>
    <option value="285">66</option>
    <option value="286">67</option>
    <option value="287">68</option>
    <option value="288">69</option>
    <option value="289">70</option>

    <option value="290">71</option>
    <option value="291">72</option>
    <option value="292">73</option>
    <option value="293">74</option>
    <option value="294">75</option>
    <option value="295">76</option>

    <option value="296">77</option>
    <option value="297">78</option>
    <option value="298">79</option>
    <option value="299">80</option>
    <option value="300">81</option>
    <option value="301">82</option>

    <option value="302">83</option>
    <option value="303">84</option>
    <option value="304">85</option>
    <option value="305">86</option>
    <option value="306">87</option>
    <option value="307">88</option>

    <option value="308">89</option>
    <option value="309">90</option>
    <option value="310">91</option>
    <option value="311">92</option>
    <option value="312">93</option>
    <option value="313">94</option>

    <option value="314">95</option>
    <option value="315">96</option>
    <option value="316">97</option>
    <option value="317">98</option>
    <option value="318">99</option>
    <option value="319">100</option>

etc... This second block will have over 200 values.

So for example if option value=482 is selected from the first dropdown, I would only want the options for numbers 30-87 to show in the second dropdown, removing a set of numbers below 30 and above 87. Is there a way to somehow iterate through these by value, in a range, instead of doing

    `$("#ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_14_35 option[value='256']").remove();`

for each individual value? I have seen some examples on how to clear the entire contents, but haven't found any showing how to clear a range of items. Not sure if this is even possible.

UDPATE:

I created arrays to hold the values of the ranges that I would like to use:

var ten_37 = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37]
var twenty_50 = [20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50]

Then, using JQuery, I emptied, then populated the dropdown with the array values:

   if (panelConfig == 476 || panelConfig == 477) {
    $('#ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_14_65').empty();
    $.each(ten_37, function(val, text) {
    $('#ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_14_65').append( $('<option></option>').val(val).html(text) )
    
    });

}

    else if (panelConfig == 478 || panelConfig == 479) {
        $('#ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAttributes_14_65').empty();
        $.each(twenty_50, function(val, text) {
        $('#ctl00_ctl00_cph1_cph1_ctl00_ctrlProductVariantsInGrid_rptVariants_ctl00_ctrlProductAt开发者_如何学Ctributes_14_65').append( $('<option></option>').val(val).html(text) )
         });
  }

I had to empty first, because each time the first menu selected an item, it would just keep adding the same array over and over.

Is it not better (primarly for performance) to empty your combobox and refill it when selectedItem changes in Dropdown 1?

I think if you predefine an JS array and put in there the values of dropdown 2 and filter it based on selected item in dropdown 1 and bind the result to dropdown 2, it will perform better (than when you poke around in list items) and your code is better organized.

You can iterate through a dropdown so:

$('#foo option').each(function() {
    if ( parseInt(this.innerHTML) < 30 || parseInt(this.innerHTML) > 87) $(this).remove(); 
});

Of course, the values to test against wouldn't be hard-coded and if it were me, I would embed the test values in the first drop-down. For example,

<option value="482|30|87">Three Panel... </option>

Then, you can parse out the "30" & "87" in your event listener function, thereby reducing lots of hard-coded conditional logic.