Javascript 从下拉列表中删除所选选项

我用无序列表建立了一个下拉列表

看起来是这样的：

<div id="dd" class="wrapper-dropdown" tabindex="1">
    <span>Default Option</span>
    <ul class="dropdown">
        <li><a href="#"><i></i>Default Option</a></li>
        <li><a href="#"><i></i>Option 1</a></li>
        <li><a href="#"><i></i>Option 2</a></li>
        <li><a href="#"><i></i>Option 3</a></li>
        <li><a href="#"><i></i>Option 4</a></li>
    </ul>
</div>

我想要实现的是使所选选项从下拉菜单中消失，这样它就不会像现在一样重复（选择选项1不会将其从列表中删除） 有人能提出一种不用重新构建javascript的方法吗

谢谢大家

您可以使用

hide（）

方法隐藏单击的选项：

$(obj.opts[0]).hide();
obj.opts.on('click',function(){
    obj.opts.show(); //Show all
    $(this).hide(); //Hide the clicked one

    var opt = $(this);
    obj.val = opt.text();
    obj.index = opt.index();
    obj.placeholder.text(obj.val);
});

希望这有帮助

---

功能下拉列表（el）{
这1.dd=el；
this.placeholder=this.dd.children（'span'）；
this.opts=this.dd.find（'ul.dropdown>li'）；
this.val=''；
这个指数=-1；
this.initEvents（）；
}
DropDown.prototype={
initEvents:function（）{
var obj=这个；
obj.dd.on（'点击'，功能（事件）{
$（this.toggleClass（'active'）；
返回false；
});
$（obj.opts[0]）.hide（）；
obj.opts.on（'click'，function（））{
obj.opts.show（）；
$（this.hide（）；
var opt=$（本）；
obj.val=opt.text（）；
obj.index=opt.index（）；
对象占位符文本（obj.val）；
});
},
getValue:function（）{
返回此.val；
},
getIndex:function（）{
返回此.index；
}
}
$（函数（）{
var dd=新的下拉列表（$（'#dd'）；
$（文档）。单击（函数（）{
//所有下拉列表
$（'.wrapper下拉列表'）.removeClass（'active'）；
});
});
*，
*：之后，
*：之前{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
填充：0；
保证金：0；
}
：：选择{
背景：透明；
}
：-moz选择{
背景：透明；
}
.包装器演示{
利润率：60px0；
*缩放：1；
字体大小：400；
}
.包装器演示：之后{
明确：两者皆有；
内容：“；
显示：表格；
}
.包装器下拉列表{
/*大小和位置*/
位置：相对位置；
宽度：200px；
保证金：0自动；
填充：10px；
/*风格*/
背景：#fff；
边界半径：7px；
边框：1px实心rgba（0,0,0,0.15）；
光标：指针；
大纲：无；
/*字体设置*/
字体大小：粗体；
颜色：#8AA8BD；
}
.包装器下拉列表：在{
内容：“；
宽度：0；
身高：0；
位置：绝对位置；
右：15px；
最高：50%；
利润上限：-3px；
边框宽度：6px 6px 0 6px；
边框样式：实心；
边框颜色：#8aa8bd透明；
}
.包装器下拉列表.下拉列表{
/*大小和位置*/
位置：绝对位置；
最高：102%；
左：-1px；
右：-1px；
/*风格*/
背景：白色；
边界半径：0 0 7px 7px；
边界顶部：无；
左边框：1px纯蓝色；
右边框：1px纯蓝色；
边框底部：1px纯蓝色；
字体大小：正常；
-webkit过渡：所有0.1都易于使用；
-moz转换：所有0.1秒都容易进入；
-ms转换：所有0.1秒都容易进入；
-o型过渡：所有0.1秒都容易进入；
过渡：所有0.1秒都容易进入；
列表样式：无；
/*隐藏*/
不透明度：0；
指针事件：无；
}
.包装器下拉列表.下拉列表李a{
显示：块；
填充：10px；
文字装饰：无；
颜色：#8aa8bd；
边框底部：1px实心#e6e8ea；
-webkit转换：所有0.1都可以轻松完成；
-moz转换：所有0.1秒都会变慢；
-毫秒转换：所有0.1秒都会变慢；
-o型过渡：所有0.1秒都放松；
过渡：所有的0.1都放松；
}
.包装器下拉列表.下拉列表李i{
浮动：对；
颜色：继承；
}
.包装器下拉列表。下拉列表李：类型a的第一个{
边界半径：7px 7px 0；
}
.wrapper下拉列表。下拉列表李：a型的最后一个{
边界：无；
边界半径：0 0 7px 7px；
}
/*悬停状态*/
.包装器下拉列表。下拉列表李：将鼠标悬停在a上{
背景：#f3f8；
}
/*活动状态*/
.wrapper-dropdown.active{
边界半径：7px 7px 0；
边框顶部：1px纯蓝色；
左边框：1px纯蓝色；
右边框：1px纯蓝色；
边框底部：1px实心#e6e8ea；
}
.wrapper-dropdown.active.dropdown{
不透明度：1；
指针事件：自动；
}
/*没有CSS3支持*/
.没有不透明度。包装下拉列表。下拉列表，
.无指针事件.包装下拉列表.下拉列表{
显示：无；
不透明度：1；/*如果不透明度支持但不支持指针事件*/
指针事件：自动；/*如果指针事件支持但不支持指针事件*/
}
.no opacity.wrapper-dropdown.active.dropdown，
.no pointerevents.wrapper-dropdown.active.dropdown{
显示：块；
}

默认选项







那么您想删除单击的选项，但不想删除默认选项吗？谢谢，我不确定“全部显示”部分。你给了我一个教训。：-）你知道如何防止“默认选项”在加载时重复吗？太好了。你按顺序将列表数组中的第一项作为目标。课程将继续。谢谢！
$(obj.opts[0]).hide();
obj.opts.on('click',function(){
    obj.opts.show(); //Show all
    $(this).hide(); //Hide the clicked one

    var opt = $(this);
    obj.val = opt.text();
    obj.index = opt.index();
    obj.placeholder.text(obj.val);
});