如何使用 jquery 从下拉菜单中删除许多但不是全部选项项？

Question

我有两个下拉菜单。第一个包含某些项目，根据它们的选择，我想删除第二个下拉列表中的大约 100 个选项。这在 jquery 中是否可能，而无需数百行代码单独删除和附加每个项目？

第一个下拉列表的代码是：

 <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>

第二个下拉列表的代码是：

<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>

等等... 第二个块将包含 200 多个值。

因此，例如，如果从第一个下拉列表中选择选项 value=482，我只想在第二个下拉列表中显示数字 30-87 的选项，删除一组低于 30 和高于 87 的数字。有没有办法以某种方式在一定范围内按值迭代这些值，而不是

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

针对每个单独的值进行迭代？我看过一些有关如何清除全部内容的示例，但没有找到任何显示如何清除一系列项目的示例。不确定这是否可能。

UDPATE：

我创建了数组来保存我想要使用的范围的值：

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]

然后，使用 JQuery 清空，然后用数组值填充下拉列表：

   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_ctrlProductAttributes_14_65').append( $('<option></option>').val(val).html(text) )
         });
  }

我必须先清空，因为每次选择第一个菜单时一个项目，它只会一遍又一遍地添加相同的数组。

Answer 1

当 Dropdown 1 中的 selectedItem 发生更改时，清空组合框并重新填充它不是更好吗（主要是为了性能）？

我认为如果你预定义一个 JS 数组并放入下拉列表 2 的值并根据下拉列表 1 中的所选项目对其进行过滤并将结果绑定到下拉列表 2，那么它的性能会更好（比你在列表项中浏览时要好）你的代码组织得更好。

Answer 2

您可以迭代下拉列表：

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

当然，要测试的值不会被硬编码，如果是我，我会将测试值嵌入到第一个下拉列表中。例如，

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

然后，您可以解析出“30”和“30”。 “87”在您的事件侦听器函数中，从而减少大量硬编码条件逻辑。