Как мне удалить многие, но не все элементы опций из выпадающего меню, используя jquery? - PullRequest
Новая
       17

Как мне удалить многие, но не все элементы опций из выпадающего меню, используя jquery?

0 голосов
/ 26 мая 2011

У меня есть 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 значений.

Так, например, если в первом раскрывающемся списке выбрано значение параметра = 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 ]

0 голосов
/ 26 мая 2011

Вы можете перебирать выпадающий список так: 

$('#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» в функции прослушивания событий, тем самым уменьшая количество жестко заданной условной логики.

0 голосов
/ 26 мая 2011

Разве не лучше (в первую очередь для повышения производительности) очистить ваш комбинированный список и заполнить его, когда selectedItem изменяется в Dropdown 1?

Я думаю, что если вы предварительно определите массив JS и поместите туда значения раскрывающегося списка 2 и отфильтруете его по выбранному элементу в раскрывающемся списке 1 и привяжете результат к раскрывающемуся списку 2, он будет работать лучше (чем при просмотре списка элементы), и ваш код лучше организован.

...