I am using sumoselect plugin ( http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html ).
I have two select dropdowns. First, one I directly added to the HTML page and the second one I am displaying dynamically using jQuery.
sumoselect plugin is working only for the first one select dropdown but not working with the second one.
Would you help me out with this issue?
$(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>
After using @Terry answer
$(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);
});
});
That is because your new .fileStatus
dropdown is added after runtime , and the code $('.fileStatus').SumoSelect()
has already been invoked. It is important to remember that JS is not reactive in the sense that it will automatically find new elements all the time: you will need to instantiate SumoSelect on the new <select>
element that is added.
You can simply do this by chaining .find('.fileStatus').SumoSelect()
after the .append()
method, because by then the new .fileStatus
element will be already present in the 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.