jQuery Choices.js 动态新增多选下拉框运行异常问题排查

核心问题梳理 #

• jQuery版本冲突：同时引入了3个不同版本的jQuery，会导致方法调用异常，建议只保留jQuery3.3.1版本，删除其余两个旧版本的引用。
• 废弃方法使用：.live()方法在jQuery1.7版本后就已被废弃，需要替换为事件委托写法.on()。
• 语法错误：JS变量命名不允许使用-符号，原代码中的var multiselect-${i}属于语法错误，会直接导致代码执行中断。
• 事件重复绑定：每次新增字段时都绑定一次submit点击事件，提交时会触发多次执行逻辑，应该统一编写提交逻辑。
• 冗余的内联事件：submit按钮和form标签上绑定了不存在的checkForm、getMultipleSelectedValue方法，需要移除或自行实现。
• 重复ID问题：删除按钮使用了固定ID，新增多组后会出现ID重复，改为class类名绑定事件。

修复后代码 #

HTML代码 #

<!-- 仅保留一个版本的jQuery，避免冲突 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css">
<script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script>

<form method="post" id="datasend" autocomplete="off" name="datasend">
    <div id="items-lists">
        <p class="item-group">
            <label for="item-list-1">
                <select name="items-cat-1" id="choices-multiples" placeholder="Select The Items 1" multiple>
                    <option value="Item-01">Item-01</option>
                    <option value="Item-02">Item-02</option>
                </select>
            </label>
            <br>
            <label for="item-list-2">
                <select name="items-cat-2" id="choices-multiple" placeholder="Select The Items 2" multiple>
                    <option value="Item-01">Item-01</option>
                    <option value="Item-02">Item-02</option>
                </select>
            </label>
            <br>
            <input type="text" name="items-cat-1" id="items-1">
            <input type="text" name="items-cat-2" id="items-2">
        </p>
    </div>
    <h6><a href="#" id="add_items">Add New Items</a></h6>
    <input id="submit" type="submit" name="submit" value="Submit">
</form>

JS代码 #

$(document).ready(function(){
    // 初始化默认的两个多选下拉框
    new Choices('#choices-multiples', {
        removeItemButton: true,
        maxItemCount:100,
        searchResultLimit:100,
        renderChoiceLimit:100
    });
    new Choices('#choices-multiple', {
        removeItemButton: true,
        maxItemCount:100,
        searchResultLimit:100,
        renderChoiceLimit:100
    });

    const scntDiv = $('#items-lists');
    let i = $('#items-lists .item-group').length + 1;

    // 新增字段事件，用on代替废弃的live
    $(document).on('click', '#add_items', function() {
        $(`
        <p class="item-group">
            <label for="item-list-1">
                <select name="items-cat-1-${i}" id="choices-multiples-${i}" placeholder="Select The Items 1" multiple>
                    <option value="Item-01">Item-01</option>
                    <option value="Item-02">Item-02</option>
                </select>
            </label>
            <br>
            <label for="item-list-2">
                <select name="items-cat-2-${i}" id="choices-multiple-${i}" placeholder="Select The Items 2" multiple>
                    <option value="Item-01">Item-01</option>
                    <option value="Item-02">Item-02</option>
                </select>
            </label>
            <br>
            <input type="text" name="items-cat-1-${i}" id="items-1-${i}">
            <input type="text" name="items-cat-2-${i}" id="items-2-${i}">
            <a href="#" class="rem_items-lists">Remove Field</a>
        </p>
        `).appendTo(scntDiv);   

        // 实例化新增加的两个多选下拉框
        new Choices(`#choices-multiple-${i}`, {
            removeItemButton: true,
            maxItemCount:5,
            searchResultLimit:5,
            renderChoiceLimit:5
        });
        new Choices(`#choices-multiples-${i}`, {
            removeItemButton: true,
            maxItemCount:5,
            searchResultLimit:5,
            renderChoiceLimit:5
        });
        i++;
        return false;
    });

    // 删除字段事件，用on代替废弃的live，绑定class避免ID重复
    $(document).on('click', '.rem_items-lists', function() {
        $(this).parents('.item-group').remove();
        return false;
    });

    // 统一提交逻辑，遍历所有字段组完成赋值
    $('#submit').click(function(e){
        // 如需正常提交表单可注释下面一行阻止默认行为的代码
        e.preventDefault();
        $('.item-group').each(function(index){
            const idx = index + 1;
            let select1Val, select2Val;
            if(idx == 1){
                select1Val = $('#choices-multiples').val();
                select2Val = $('#choices-multiple').val();
                $('#items-1').val(select1Val);
                $('#items-2').val(select2Val);
            }else{
                select1Val = $(`#choices-multiples-${idx}`).val();
                select2Val = $(`#choices-multiple-${idx}`).val();
                $(`#items-1-${idx}`).val(select1Val);
                $(`#items-2-${idx}`).val(select2Val);
            }
        })
    });
});

修复后效果 #

• 可正常新增、删除多组多选下拉框
• 每组下拉框的选中值可正常同步赋值到对应的文本输入框
• 无JS语法错误、事件重复触发、元素ID重复等问题

内容的提问来源于stack exchange，提问作者La Edu