如何使用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&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) )
         });
  }
我必须先清空,因为每次第一个菜单选择一个项目时,它只会不断添加相同的数组。 谢谢您的帮助!     
已邀请:
当下拉列表1中的selectedItem更改时,清空组合框并重新填充它不是更好(主要是为了提高性能)? 我认为,如果您预先定义一个JS数组,并在其中放置下拉列表2的值,并根据下拉列表1中的选定项对其进行过滤,然后将结果绑定到下拉列表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 \”和\“ 87 \”,从而减少了许多硬编码的条件逻辑。     

要回复问题请先登录注册