如何使用jQuery实现下拉选项添加至Div及单条删除功能？

Got it, let's put together a solution that exactly matches your needs. Below is a complete, working code example with HTML and jQuery, plus breakdowns of how each part works.

Complete Code #

<!DOCTYPE html>
<html>
<head>
    <title>Select & Add/Remove Items</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .added-item {
            display: inline-block;
            margin: 5px;
            padding: 6px 10px;
            background: #f0f0f0;
            border-radius: 4px;
        }
        .delete-btn {
            margin-left: 8px;
            cursor: pointer;
            color: #dc3545;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <select id="item-select">
        <option value="">-- 选择选项 --</option>
        <option value="item1">选项1</option>
        <option value="item2">选项2</option>
        <option value="item3">选项3</option>
        <option value="item4">选项4</option>
    </select>
    <button id="add-btn">添加选中项</button>

    <div id="added-items-container">
        <!-- 已添加的项会在这里显示 -->
    </div>

    <script>
        $(document).ready(function() {
            // 点击添加按钮的逻辑
            $('#add-btn').click(function() {
                var selectedOption = $('#item-select option:selected');
                var itemText = selectedOption.text();
                var itemValue = selectedOption.val();

                // 检查是否选中了有效选项
                if (!itemValue) {
                    alert('请先选择一个选项');
                    return;
                }

                // 创建带删除按钮的项元素
                var itemElement = $('<div class="added-item"></div>')
                    .text(itemText)
                    .append('<span class="delete-btn" data-value="' + itemValue + '">X</span>');

                // 追加到展示容器
                $('#added-items-container').append(itemElement);

                // 可选：清空选中状态，方便下次选择
                $('#item-select').val('');
            });

            // 处理删除按钮的点击（用事件委托，因为元素是动态生成的）
            $('#added-items-container').on('click', '.delete-btn', function() {
                $(this).parent('.added-item').remove();
            });
        });
    </script>
</body>
</html>

Key Details Explained #

• HTML Structure: We have a <select> dropdown, a trigger button, and a container <div> to hold added items. The CSS styles make the added items look clean with a distinct delete button.
• Add Functionality:
  • When the add button is clicked, we grab the currently selected option's text and value.
  • We do a quick check to make sure a valid option was selected (not the placeholder).
  • We create a new <div> element for the added item, include the option text, and add a delete button with a data-value attribute (useful if you need to track the original value later).
  • Finally, we append this new element to the container and optionally reset the dropdown to the placeholder.
• Delete Functionality:
  • Since the delete buttons are dynamically generated after page load, we use jQuery's event delegation (on() method attached to the static container) to handle clicks on these buttons.
  • When a delete button is clicked, we simply remove its parent .added-item element from the DOM.

Optional Enhancements #

If you want to prevent duplicate items from being added, you can add a check before appending:

// 检查是否已存在相同值的项
if ($('#added-items-container .delete-btn[data-value="' + itemValue + '"]').length === 0) {
    $('#added-items-container').append(itemElement);
} else {
    alert('该选项已添加');
}

内容的提问来源于stack exchange，提问作者Aries Azad