我有2个下拉菜单。第一个包含某些项目，根据他们的选择，我想删除第二个下拉列表中的大约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" - 37")</option>
<option value="477"> One Panel - Right Side Hinge (Window Size Width 10" - 37")</option>
<option value="478"> Two Panel - LL Side Hinge (Window Size Width 20" - 50")</option>
<option value="479"> Two Panel - RR Side Hinge (Window Size Width 20" - 50")</option>
<option value="480"> Two Panel - LR Side Hinge (Window Size Width 20" - 74")</option>
<option value="481"> Three Panel - LLR Side Hinge (Window Size Width 30" - 87")</option>
<option value="482"> Three Panel - LRR Side Hinge (Window Size Width 30" - 87")</option>
<option value="483"> Three Panel - LTLTL Side Hinge (Window Size Width 30" - 111")</option>
<option value="484"> Three Panel - LTRR Side Hinge (Window Size Width 30" - 87")</option>
<option value="485"> Three Panel - LLTR Side Hinge (Window Size Width 30" - 87")</option>
<option value="486"> Four Panel - LLRR Side Hinge (Window Size Width 40" - 100")</option>
<option value="487"> Four Panel - LLTRR Side Hinge (Window Size Width 40" - 100")</option>
<option value="488"> Four Panel - LRTLR Side Hinge (Window Size Width 40" - 100")</option>
<option value="489"> Four Panel - RRTLL Side Hinge (Window Size Width 40" - 100")</option>
<option value="490"> Four Panel - LTLRTR Side Hinge (Window Size Width 40" - 100")</option>
<option value="491"> Six Panel - LRTLRTLR Side Hinge (Window Size Width 60" - 222")</option>
<option value="492"> Six Panel - LLTLRTRR Side Hinge (Window Size Width 60" - 174")</option>
<option value="493"> Six Panel - LTLLRRTR Side Hinge (Window Size Width 60" - 174")</option>
<option value="494"> Six Panel - RTLLRRTL Side Hinge (Window Size Width 60" - 174")</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个值。
因此，例如，如果从第一个下拉列表中选择了选项值= 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) )
});
}
我必须先清空，因为每次第一个菜单选择一个项目时，它都会一遍又一遍地添加相同的数组。
感谢您的帮助！
答案 0 :(得分：0)
当DropI 1中的selectedItem更改时，清空组合框并重新填充它是不是更好（主要是性能）？
我认为如果你预先定义一个JS数组，并在其中放入下拉列表2的值并根据下拉列表中的选定项目对其进行过滤，并将结果绑定到下拉列表2，它将表现得更好（比你在列表中找到的那样）项目）和你的代码组织得更好。
答案 1 :(得分：0)
您可以遍历下拉列表，以便：
$('#foo option').each(function() {
if ( parseInt(this.innerHTML) < 30 || parseInt(this.innerHTML) > 87) $(this).remove();
});
当然，要测试的值不会被硬编码，如果是我，我会在第一个下拉列表中嵌入测试值。例如，
<option value="482|30|87">Three Panel... </option>
然后，你可以解析出“30”＆amp;事件监听器函数中的“87”，从而减少了大量硬编码的条件逻辑。