0

tengo el siguiente index, que incluye un multiselect(fselect.css y fselect.js)el cual se muestra en la siguiente imagen:

introducir la descripción de la imagen aquí

y mi codigo es el siguiente:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Registro Mantenimiento</title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="style.responsive.css" media="all">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="multiselect/fSelect.css" rel="stylesheet">
<script src="multiselect/fSelect.js"></script>
<script>
  (function($) {
      $(function() {
          $('.test_3').fSelect();
      });
  })(jQuery);
</script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans&amp;subset=latin">


<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/funciones.js"></script>
 </head>
<body>
<center>
  <br/>
<div id="contenedor" style="width: 300px">
<br/><br/>
<label>DNI</label>
<input type="text" id="dni"> 

<br/><br/>
<label>NOMBRE</label>
<input type="text" id="nombre"> 

<br/><br/>
<label>APELLIDO</label>
<input type="text" id="apellido"> 

<br/><br/>

<label>CURSOS</label>
 </br>
 <select class="test_3" id="tecnologia" name="tecnologia[]" multiple="multiple" style="height:10px;">
    <option value="Algebra">Algebra</option> 
    <option value="Aritmetica">Aritmetica</option> 
    <option value="Lenguaje">Lenguaje</option> 
    <option value="Literatura">Literatura</option>
    <option value="Historia Universal">Historia Universal</option> 
    <option value="Biologia">Biologia</option>
    <option value="Quimica">Quimica</option>
    <option value="Fisica">Fisica</option>
 </select>

 </br></br>
 <button onclick="anadir();">Añadir</button>
 <button onclick="actualizar();">Modificar</button>
 <button onclick="eliminar();">Eliminar</button>
 <input type="submit" onclick="buscar();" value="buscar">
 </div>

 <div id="ventana"> 
 </div>
 </center>

</body>
</html>

entonces cuando guardo mi multiselect, los valores seleccionados se guardan en la base de datos "separadas por comas". y al momento que uso mi jSON para traer valores los llamo de la siguiente manera con la funcion buscar():

function buscar(){

var parametros={"dni": $("#dni").val(),}

$.ajax({

        type: 'post',
        url: '../lunes-5/buscardatos.php',
        data: parametros,
        dataType: 'json',
        success: function(d){
            $("#nombre").val(d[0]);
            $("#apellido").val(d[1]);

            $.each(d[2].split(","), function(i,e){

                $("#tecnologia").multiselect("refresh");
            });
        }
    });
}

y mi buscardatos.php es el siguiente

<?php
 $con = mysql_connect("localhost","root","");
 mysql_select_db("archivos",$con);

  $dni=$_POST["dni"];
  $rs=mysql_query("SELECT * FROM clie  WHERE dni='$dni'");

  $row = mysql_fetch_assoc($rs);

  $datos_a_enviar = array($row['nombre'], 
  $row['apellido'],$row['tecnologia']);
   echo json_encode($datos_a_enviar);
  ?>

entonces solo me devuelve los valores de nombre y apellido, pero no del multiselect, como se ve en esta imagen:

introducir la descripción de la imagen aquí

como haria para que se seleccionen los valores que marque cuando guarde el registro, si los estoy almacenando delimitado por "comas"?

4
  • la forma mas simple de trabajarlo y la correcta deberia ser con 3 tablas 1. los datos de usuario 2.cursos 3. seleccion en selecion debe estas id, id_user , id_curso! select cu.cursos from cursos cu inner join seleccion se on cu.id == se.id_curso inner join clie on se.id_clie == clie.'${client_id}'; esto te permitira a;adir cuantos cursos deses, cuantas selecciones deses, y clientes sin limites!
    – Bryro
    Commented el 21 nov. 2018 a las 19:50
  • mi consulta era como llamarlo en el JSON
    – user83889
    Commented el 21 nov. 2018 a las 19:55
  • puedes hacerlo con el e $.each(d[2].split(","), function(i,e){ console.log(i,e) i es el indice y e es el valor o tambien hacerlo asi: var multi = d[2].split(","); multi[0]; multi[1]; multi[2]; etc....
    – Bryro
    Commented el 21 nov. 2018 a las 20:02
  • no se entiende bien tu codigo, yo intente hacer esto: $.each(d[2].split(","), function(i,e){ $("#tecnologia").multiselect("refresh"); }); pero no resulto
    – user83889
    Commented el 21 nov. 2018 a las 20:24

1 respuesta 1

0

Lo que te indica Bryro es correcto pero tu no haces ninguna asignación, debería ser algo así:

        $.each(d[2].split(","), function(i,e){
            $('#tecnologia option[value="'+e+'"]').prop('checked', true);
        });

En el bucle each es donde debes poner el checked a las opciones correspondientes.

Personalmente yo usaría indices numéricos, hacer operaciones con literales de texto es poco flexible (mayúsculas y espacios son un dolor de cabeza, errores ortográficos, idiomas.... ) y el JSON resultante es más reducido.

Algo como:

 <select class="test_3" id="tecnologia" name="tecnologia[]" multiple="multiple" style="height:10px;">
    <option id="tec_1" value="1">Algebra</option> 
    <option id="tec_2" value="2">Aritmetica</option> 
    <option id="tec_3" value="3">Lenguaje</option> 
    <option id="tec_4" value="4">Literatura</option>
    <option id="tec_5" value="5">Historia Universal</option> 
    <option id="tec_6" value="6">Biologia</option>
    <option id="tec_7" value="7">Quimica</option>
    <option id="tec_8" value="8">Fisica</option>
 </select>

y el bucle que actualiza sería:

        $.each(d[2].split(","), function(i,e){
            $('#tec_'+e).prop('checked', true);
        })

Informacion adicional sobre el check: https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery

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.