0

tengo un array funcionando, pero al darle clic en el boton gregar input dentro del array solo me agrega el valor con una ventana modal al primer input y pero no fuciona con el resto de filas del array. envio el codigo actual:

19
  • Explica un poco mejor, ¿te refieres que en vez de crear el select2 en tu archivo html hacerlo desde un archivo aparte .js? el 21 ene. 2019 a las 1:11
  • hola, lo que sucede es que tengo un archivo php que es donde funciona mi select2 y no hay problemas pero ahora tengo un array en un .js y necesito agregar el select2 ahi , pero no se como hacer para cargar las librerias que se necesitan para que el select funcione dentro del .js, ya que las tengo en el php me muestro en pantalla. el 21 ene. 2019 a las 1:20
  • La cosa que quieres hacer se me hace extraña, pero seguire preguntando para poder ayudarte, ¿porque mencionas el array? ¿quieres que el select muestre los valores del array? el 21 ene. 2019 a las 1:29
  • ya tengo el array listo, solo necesito poder crear un select2 dentro del .js , pero no se como cargar las librerias de la misma para que me funcione tal cual como en el php, en otras palabras lo que necesito es un ejemplo de un select2 pero funcionando desde un .js el 21 ene. 2019 a las 1:31
  • Amiga creo que estas confundida, dentro de los archivos js no puedes agregar librerías, lo que debes es agregarlos antes de que agregues la referencia de tu archivo js donde tienes el array, esto lo haces en el archivo de tu pagina donde pones el codigo Html. el 21 ene. 2019 a las 1:35

2 respuestas 2

0

Intenta agregándole a tu select en el HTML, la clase class="js-state select2", simplemente se lo añades a las que tiene ya dicho elemento, de tal manera que te pueda quedar algo como:

class="categoryName form-control js-state select2"

O también puedes cargarle el método a dihco elemento al momento de cargar la página en el mismo javascript, es decír algo como:

$(document).ready(function(){
  $(".categoryName").select2();
})
3
  • el problema no es para crear el select si no es para cargar las librerias de "script" dentro del .js del select que senecesita para que el select funcione, ya que lo que necesito es pasar el select2 que tengo actualmente a un archivo .js el 21 ene. 2019 a las 0:19
  • Si tienes problemas para cargar la librería, ya te aseguraste de tenerla en un archivo?.. yo te recomiendo la minificada, para incluir la librería es simplemente añadir el script: <script src="...public/select2/js/select2.min.js"></script>
    – Candelo
    el 21 ene. 2019 a las 3:00
  • las librerias del select las tengo en el php y funciona sin problemas con el primer select. el 21 ene. 2019 a las 4:40
0

Estas creando un select2 con tu etiqueta script cuando carga la pagina solamente, esto significa que si creas otro select con tu codigo( como lo haces en tu ciclo for) no le afectara el codigo de convertirlo a select2 por lo que deberias ejecutar ese codigo cada vez que agregues un select nuevo.

La solución sencilla seria:

<script type="text/javascript">
  $.fn.select2.defaults.set('language', 'es'); 
function select(){
  $('.categoryName').select2({   
    placeholder: 'Selecciona una categoría', 
    ajax: { 
      url: 'conexion.php',       
      dataType: 'json',         
      delay: 250,        
     data: function (params) { 
       return { q: params.term }; 
     }, 
     processResults: function (data) { 
       return { results: data }; 
      }, 
      cache: true   
    }        
  });
}
select();//llamamos la funcion creada para que funcione una vez se cargue la pagina      
</script>   

Esos son los cambios en tu etiqueta script ahora lo unico que tenemos que hacer desde tu archivo js es llamar la función una vez crees el otro select en tu ciclo for.

  totalFinal = detalles[i].moneda+" "+total;
}
select();//volvemos a llamar la función creada en la etiqueta script al final de toda la función..

Como ves luego de que termines de tu logica en tu archivo js donde has agregado tu nuevo select al final vuelves a llamar a la función para que esta se encargue de convertir el nuevo select en un Select2 como el otro.

Aquí te dejo un ejemplo mínimo pero que creo que es la solución que buscas: archivo externo .js

function add(select){
    $("#container").append(select);//agregamos el nuevo select a la pagina
}
$("#button").click(function (e) { 
    var  select = '<select class="mySelect"><option>1</option><option>2</option></select>';
    add(select);//llamamos a la anterior funcion y le pasamos el diseño de nuestro select
    selectConvert();//luego de agregado el select llamamos a la funcion selectConvert() para actualizar el select
});
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Select2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    
</head>
<body>

    <div class="row">
        <div class=" col-md-4">

        </div>
        <div class=" col-md-4" id="container">
            <select class="mySelect">
                <option>1</option>
                <option>2</option>
            </select>
        </div>
        <div class=" col-md-4">
            <button class="btn btn-info" id="button">agregar select</button>
        </div>

    </div>
        <script>
        function selectConvert(){
            $(".mySelect").select2();
        }
        selectConvert();

        </script>
</body>
</html>
en la pagina principal ↑

Como ves con ese codigo soy capaz de agregar selects por codigo y convertilo a Select2 llamando la funcion selectConvert() cada vez que agregue uno.

2
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – Alvaro Montoro
    el 21 ene. 2019 a las 19:46
  • Gracias, no lo había hecho debido a que ella no tiene suficientes puntos para entrar el 21 ene. 2019 a las 19:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.