0
296
Views<select> items not loading using Jquery
My issue might looks very super simple but I am struggling how to load items into a select using Jquery. I am using Materialize theme found here: https://pixinvent.com/materialize-material-design-admin-template/html/ltr/vertical-modern-menu-template/
I have this. Simple:
<div class="input-field col s12">
<select id="selectid">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
@section Scripts{
<script src="~/app-assets/js/vendors.min.js"></script>
<script src="~/app-assets/js/plugins.js"></script>
<script src="~/app-assets/js/search.js"></script>
<script src="~/app-assets/js/custom/custom-script.js"></script>
<script>
$( document ).ready(function() {
$('#selectid').append(`<option value="${"10"}">${"test1"}</option>`);
$('#selectid').append(`<option value="${"11"}">${"test2"}</option>`);
$('#selectid').append(`<option value="${"12"}">${"test3"}</option>`);
});
</script>
}
my problem is that my appended items are not working:
BUT if I move the append code outside of $( document ).ready() it works. But I am trying to load them inside it while page loads.
Why is this not working? How do I solve this?
2 answers
Answer question0
there are many reason for this. But the most common is conflicts between your code and other js or jquery codes - so just run your code in no conflict mode by simply adding this line above your document.ready() function block.
$.noConflict();
and then replace all jQuery shortcut $ in you code by jQuery.
Or for shorter version:
var jq = $.noConflict();
and replace all jQuery shortcut $ in you code by jq.
0
Here is a working demo with official sample of Materialize.You can put the append code before initialize code.
<div class="input-field col s12">
<select id="selectid">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
@section Scripts{
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('#selectid').append(`<option value="${"10"}">${"test1"}</option>`);
$('#selectid').append(`<option value="${"11"}">${"test2"}</option>`);
$('#selectid').append(`<option value="${"12"}">${"test3"}</option>`);
$('#selectid').formSelect();
});
</script>
}
result:
