I'm using ajax to bind partial view in a div#demo and initiating dropdown on ajaxstop.
After submitting the details, ajax loads partial view again to refresh the table section, and then and re-initiating dropdown on ajaxstop.
this works fine for single selection dropdown, but multi-select dropdown reset the selected value.
I don't want multi-select dropdown to reset it's value.
// partial views
var viewA = `
<select class="ui dropdown"><option value="">Select Single Car</option><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select><select class="ui dropdown" Multiple><option value="">Select Multiple Car</option><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select><button type="button" class="ui button primary">Submit</button>
`
var viewB = `<table class="ui celled table unstackable"><thead><tr><th>Name</th><th>Age</th><th>Job</th></tr></thead><tbody><tr><td data-label="Name">James</td><td data-label="Age">24</td><td data-label="Job">Engineer</td></tr><tr><td data-label="Name">Jill</td><td data-label="Age">26</td><td data-label="Job">Engineer</td></tr><tr><td data-label="Name">Elyse</td><td data-label="Age">24</td><td data-label="Job">Designer</td></tr></tbody></table>`
$(document).ajaxStop(function() {
$(".dropdown").dropdown({
useLabels: false,
});
});
function bindViewA() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/todos/1"
});
$("#viewA").html(viewA);
}
function bindViewB() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/todos/1"
});
$("#viewB").html(viewB);
}
$(document).on('click', 'button', () => {
bindViewB();
});
bindViewA();
bindViewB();#demo {
padding: 30px;
}
#viewA {
margin-bottom: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script><div id="demo"><div id="viewA"></div><div id="viewB"></div></div>Steps to reproduce.
- Select item from both dropdowns
- Click on Submit button to reload details section