How to return values with JSON in a multiselect

Question

How to return values with JSON in a multiselect

Navigation

#1 by (0 votes)

0

I have the following index, which includes a multiselect (fselect.css and fselect.js) which is shown in the following image:

and my code is as follows:

<!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>

Then when I save my multiselect, the selected values are saved in the database "separated by commas". and the moment I use my jSON to bring values I call them in the following way with the search function ():

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");
            });
        }
    });
}

and my buscadatos.php is the following

<?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);
  ?>

then only returns the values of first and last name, but not of the multiselect, as seen in this image:

How would you do to select the values that you mark when you save the record, if I am storing them delimited by "commas"?

javascript php json

asked by Kevincs7 21.11.2018 в 20:36

source

1 answer

Recover token with json web token and nodejs How to add data from a modal to a view create in Laravel

score 0 · Answer 1

What Bryro tells you is correct but you do not make any assignments, it should be something like this:

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

In the loop each is where you should put the checked to the corresponding options.

Personally I would use numeric indexes, make operations with literal text is not flexible (capitals and spaces are a headache, misspellings, languages ....) and the resulting JSON is smaller.

Something like:

 <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>

and the update loop would be:

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

Additional information about the check: link