Show Selected Checkbox Text In A Drop Down Button

I want to show the selected checkbox's text inside the button, right now when i select something from the checkbox it only shows the text 'Multiple Selection ▼'

$("ul.dropdown-menu input[type=checkbox]").on('change', function() {
let multi_text = "";
  $("ul.dropdown-menu input[type=checkbox]").each(function() {
    if ($(this).is(":checked")) {
      multi_text += $(this).val() + " ";
    } else {}
    if (multi_text !== '') {
      $(".form-control").text(multi_text);
    } else {
      $(".form-control").text("Multiple Selection ▼"); 
    }
  });
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"crossorigin="anonymous"><scriptsrc="https://code.jquery.com/jquery-3.5.1.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><scriptsrc="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"crossorigin="anonymous"></script><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"crossorigin="anonymous"></script><divclass="dropdown show"><buttonstyle="border-radius: 10px; border-width: 2px; border-color: #fcb141"type="button"class="form-control"data-toggle="dropdown">Multiple Selection ▼</button><ulclass="dropdown-menu checkbox-menu allow-focus"><li><astyle="color: black;"href="#"class="large"data-value="Chinese"tabIndex="-1"><inputname="languages[]"value="Chinese"type="checkbox" />&nbsp;Chinese</a></li><li><astyle="color: black;"href="#"class="large"data-value="English"tabIndex="-1"><inputname="languages[]"value="English"type="checkbox" />&nbsp;English</a></li><li><astyle="color: black;"href="#"class="large"data-value="French"tabIndex="-1"><inputname="languages[]"value="French"type="checkbox" />&nbsp;French</a></li><li><astyle="color: black;"href="#"class="large"data-value="German"tabIndex="-1"><inputname="languages[]"value="German"type="checkbox" />&nbsp;German</a></li><li><astyle="color: black;"href="#"class="large"data-value="Italian"tabIndex="-1"><inputname="languages[]"value="Italian"type="checkbox" />&nbsp;Italian</a></li><li><astyle="color: black;"href="#"class="large"data-value="Malay"tabIndex="-1"><inputname="languages[]"value="Malay"type="checkbox" />&nbsp;Malay</a></li><li><astyle="color: black;"href="#"class="large"data-value="Spanish"tabIndex="-1"><inputname="languages[]"value="Spanish"type="checkbox" />&nbsp;Spanish</a></li></ul></div>

Share