Sumoselect插件不適用於動態選擇下拉列表

Question

我正在使用sumoselect插件（ http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html ）。

我有兩個選擇下拉菜單。 首先，一個我直接添加到HTML頁面，第二個我使用jQuery動態顯示。

sumoselect插件僅適用於第一個選擇下拉列表，而不適用於第二個選擇下拉列表。

您能幫我解決這個問題嗎？

 $(document).ready(function() { $('.fileStatus').SumoSelect(); var wrapper = $(".appentInside .row"); //Fields wrapper var add_button = $(".click_me"); //Add button ID $(add_button).click(function(e) { //on add input button click $(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>'); }); }); 

 <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 seocnd 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> 

使用@Terry回答后

$(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();
    $(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').SumoSelect();
    $('.fileStatus:last').val(fileStatus);
  });

});

Answer 1

這是因為您的新.fileStatus下拉列表是在運行時之后添加的，並且代碼$('.fileStatus').SumoSelect()已被調用。 重要的是要記住，JS不會一直處於反應狀態，因為它會一直自動查找新元素：您將需要在添加的新<select>元素上實例化SumoSelect。

您只需在.append()方法之后鏈接.find('.fileStatus').SumoSelect()即可完成此操作，因為屆時新的.fileStatus元素將已在DOM中出現：

 $(document).ready(function() { $('.fileStatus').SumoSelect(); var wrapper = $(".appentInside .row"); //Fields wrapper var add_button = $(".click_me"); //Add button ID $(add_button).click(function(e) { //on add input button click $(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').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 seocnd 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>