0
294
Views<seleccionar> elementos que no se cargan con Jquery
Mi problema puede parecer muy simple, pero tengo problemas para cargar elementos en una selección usando Jquery. Estoy usando el tema Materialise que se encuentra aquí: https://pixinvent.com/materialize-material-design-admin-template/html/ltr/vertical-modern-menu-template/
Tengo esto. 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> }mi problema es que mis elementos adjuntos no funcionan:
PERO si muevo el código adjunto fuera de $( document ).ready() funciona. Pero estoy tratando de cargarlos dentro mientras se carga la página.
¿Por qué esto no funciona? ¿Cómo puedo solucionar esto?
2 answers
Answer question0
hay muchas razones para esto. Pero el más común son los conflictos entre su código y otros códigos js o jquery, así que simplemente ejecute su código en modo sin conflicto simplemente agregando esta línea sobre su bloque de función document.ready() .
$.noConflict();y luego reemplace todos los accesos directos de jQuery $ en su código por jQuery .
O para una versión más corta:
var jq = $.noConflict();y reemplace todos los accesos directos de jQuery $ en su código por jq .
0
Aquí hay una demostración funcional con una muestra oficial de Materialise. Puede agregar el código adjunto antes de inicializar el código.
<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> } resultado: 