如何使用jquery从下拉菜单中删除很多但不是全部选项项?
|
我有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多个值。
因此,例如,如果从第一个下拉列表中选择了选项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) )
});
}
我必须先清空,因为每次第一个菜单选择一个项目时,它只会不断添加相同的数组。
谢谢您的帮助!
没有找到相关结果
已邀请:
2 个回复
傻零凰死授
焙恍挝厂熄
当然,要测试的值不会被硬编码,如果是我,我会在第一个下拉列表中嵌入测试值。例如,
然后,您可以在事件侦听器函数中解析出\“ 30 \”和\“ 87 \”,从而减少了许多硬编码的条件逻辑。