如何删除具有类的项目并创建没有它们的新下拉菜单?

时间:2014-01-26 09:22:51

标签: javascript jquery html

<select name="dnn$ctr12878$View$sizeDdl" id="sizeDdl">          
    <option selected="selected" value="">Please Select</option>         
    <option value="7" title="7">7</option>          
    <option value="7.5" title="7.5">7.5</option>        
    <option value="8" title="8">8</option>          
    <option value="8.5" title="8.5">8.5</option>        
    <option value="9" title="9">9</option>          
    <option value="9.5" title="9.5">9.5</option>        
    <option value="10" title="10">10</option>       
    <option value="10.5" title="10.5">10.5</option>         
    <option value="11" title="11">11</option>       
    <option value="11.5" class="greyOut" title="11.5, Out of stock in Brown/Brown">11.5</option>        
    <option value="12" title="12">12</option>       
    <option value="13" title="13">13</option>       
    <option value="14" class="greyOut" title="14, Out of stock in Brown/Brown">14</option></select>

如何删除具有类greyOut的项目并创建没有它们的新下拉菜单?

3 个答案:

答案 0 :(得分:2)

$('#sizeDdl')
  .find('option.greyOut').remove().end() // Remove greyOut options
  .clone(true, true).attr('id', '#sizeDd2') // Copy/clone the list, change the ID
    .insertAfter('#sizeDdl');
    // Append to wherever you want, an existing form or div
    // or after the cloned option list

请注意,您必须更改新克隆选项列表的ID,因为您不能拥有两个具有相同ID的ID。

答案 1 :(得分:0)

Demo Fiddle

var newDdl = $('#sizeDdl').clone(true,true).attr('id','newID');
newDdl.find('option.greyOut').remove();
newDdl.appendTo('body');

答案 2 :(得分:0)

您可以使用以下jquery代码:

var originalDropdown = $("#sizeDdl");
var newDropdown = originalDropdown.clone();
newDropdown.find("option.greyOut").remove();
originalDropdown.after("<select>" + newDropdown.html() + "</select>");