Sumoselect插件无法作用于动态生成的Select下拉框求助

我懂你碰到的这个麻烦——页面里静态写的<select>能用SumoSelect正常渲染，但通过jQuery动态添加的下拉框就没反应。这其实是个很常见的动态元素插件初始化问题，原因很简单：

你在$(document).ready()里调用的$('.fileStatus').SumoSelect()，只会对页面加载完成时已经存在的.fileStatus元素生效。之后通过点击按钮动态生成的新<select>，因为初始化代码已经执行过了，所以没被SumoSelect处理。

解决思路 #

在动态添加完新的<select>元素之后，立即对这个新元素调用SumoSelect()，完成插件初始化。

修改后的完整代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.min.css">

<select name="pp_fileStatus[]" class="fileStatus">
    <option disabled="" selected="">Select</option>
    <option value="1"> One</option>
    <option value="2"> Two</option>
    <option value="3"> Three</option>
</select>
<a href="javascript:void(0);" class="click_me">click me to display second dropdown</a>
<div class="appentInside">
    <div class="row"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.min.js"></script>
<script>
$(document).ready(function() {
    // 初始化页面已有的静态下拉框
    $('.fileStatus').SumoSelect();
    
    // 同步下拉框选中值的逻辑（保留你原有的需求）
    $('.fileStatus:first').change(function() {
        var fileStatus = $('.fileStatus option:selected').val();
        $('.fileStatus:last').val(fileStatus);
    })
    
    var wrapper = $(".appentInside .row"); //Fields wrapper
    var add_button = $(".click_me"); //Add button ID
    
    $(add_button).click(function(e) { //on add input button click
        e.preventDefault();
        var fileStatus = $('.fileStatus:last option:selected').val();
        
        // 关键：添加新元素后，立刻对它初始化SumoSelect
        $(wrapper).append('<select name="pp_fileStatus[]" class="fileStatus"><option disabled="" selected="">Select</option><option value="1"> One</option><option value="2">Two</option><option value="3"> Three</option></select>')
                  .find('.fileStatus:last') // 定位到刚添加的新下拉框
                  .SumoSelect(); // 初始化插件
        
        // 同步选中值
        $('.fileStatus:last').val(fileStatus);
    });
});
</script>

关键改动说明 #

• 在动态添加<select>的代码后，用.find('.fileStatus:last')精准定位到刚生成的新元素，避免重复初始化已有的下拉框
• 对这个新元素调用.SumoSelect()，完成插件的初始化流程

这样不管你点击多少次按钮添加新下拉框，每个新生成的元素都会被正确初始化，就能正常使用SumoSelect的功能了。

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