javascript - jquery 删除选中的下拉项

标签 javascript jquery html

一旦我从下拉列表中选择一个项目,该项目将被放置在

  • 标签内,如下所示

    dropdown item

    html和javascript的代码如下

    <select class="dropDownList" id="PersonFunction">
        <option value="">Choose</option>
        <option value="1">Vice President</option>
        <option value="2">Director</option>
        <option value="3">Secretary</option>
        <option value="4">Clerk</option>
    </select>
    <div class="options">
        <ul>
        </uL>
    </div>
    
    <script type="text/javascript">
    $("#PersonFunction").change(function() {
    
        var val = $("option:selected", $(this)).text();
    var opt1 = '<li id="'+ $(this).val()+'">'+val+ '<a href="#" class="launch" onclick="removeItem(event)"> remove</a></li>';
    
        $('.options ul').append(opt1);
    });
    function removeItem(event){
        disabledEventPreventDefault(event);
    
    }
    </script>
    

    现在我需要在单击删除链接时删除项目,这将触发 removeItem 功能,我该如何执行此操作。尝试了很多方法但没有用。谢谢

  • 最佳答案

    $(".options").on('click', 'a', function (e) {
       $(this).closest('li').remove();
       e.preventDefault();
    });
    

    另一件小事:您可以使用 $("option:selected", this)this 不需要在选择器中。

    关于javascript - jquery 删除选中的下拉项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12988840/

    相关文章:

    javascript - Angularjs 检查并比较两个输入字段值

    javascript - 如何仅使用 JavaScript 将 base64 编码的图像数据上传到 S3?

    javascript - 在 kendo ui 网格中上下滚动时取消选中复选框

    javascript - 当在不同页面上单击链接时,试图让这个 wordpress 主题滚动到一个 id

    jquery - Bootstrap 菜单没有下推正文

    javascript - 如何在不抛出错误的情况下从 Promise 中正确冒泡错误?

    javascript - 从对象中查找并删除空属性

    javascript - 选择创建 DOM 元素还是在 javascript 中使用 HTML 来生成控件

    javascript - 从 Javascript 中删除文件和值

    javascript - 如何从 HTML 中的用户输入中查找列表的平均数、最大数和最小数