Fatal编程技术网
  • jquery/
  • 如何使用jquery从下拉菜单中删除许多但不是所有的选项项？

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

jquery drop-down-menu

如何使用jquery从下拉菜单中删除许多但不是所有的选项项？,jquery,drop-down-menu,options,Jquery,Drop Down Menu,Options,我有两个下拉菜单。第一个包含某些项目，根据它们的选择，我想删除第二个下拉列表中的大约100个选项。这在jquery中是否可能，而不需要数百行代码分别删除和追加每个项 第一个下拉列表的代码是： <div> <span style="font-weight:bold;"><span>*</span> Panel Configuration<br /></span><select name="ctl00$ctl00

我有两个下拉菜单。第一个包含某些项目，根据它们的选择，我想删除第二个下拉列表中的大约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>
对于每个单独的值？我看过一些关于如何清除整个内容的示例，但没有找到任何显示如何清除一系列项目的示例。不确定这是否可能

乌德帕特：

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

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

    });
}

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

谢谢你的帮助

当下拉列表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，从而减少大量硬编码的条件逻辑。

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>