New question

Question:

Date: 16-02-2018 15:21:03 (In Spanish)

Cómo seleccionar opciones de un select multiples dinamicamente con javascript y php?[Unresolved]

Hola buenas noches qué tal?, Tengo una duda y espero contar con su apoyo para resolverla. Veran, no se como explicarlo bien, ya que es algo complejo; estoy aprendiendo a programar en php-javascript-sql, por medio de un curso y nos dejaron de tarea aplicarle dinamismo con javascript a unos formularios basados en campos select multiples, y tener la opción de "agregar información" y "editar información reciente". He creado un par de formularios iguales, el primero digamos que es el que aparecera cuando le de click al botón "agregar información nueva", allí podre seleccionar valores y guardarlos en una base de datos(eso lo hago sin ningun problema). El segundo formulario sera el que ira en la sección "Editar información reciente"; para este debo extraer datos de la base de datos(los datos que guarde previamente con el primer formulario), guardar esos datos en variables php y luego por medio de javascript tratar de hacer que esos datos aparezcan como opciones seleccionadas en los campos selects, es decir: Digamos que inicio sesion en un pequeño sistema, voy hacia el formulario 1 (agregar información nueva), selecciono una o varias opciones de cada select y después le doy click a un botón guardar, esos datos se almacen en una base de datos, luego me salgo del sistema. Cuando ingreso nuevamente, digamos que quiero editar la información que guarde con anterioridad, entonces me voy a la opción "editar información reciente" deberia salirme el segundo formulario (estructuralmente identico al primero) con los datos que yo habia seleccionado anteriormente (en el primer formulario), cosa que pueda editar y luego guardar los cambios.
Yo estoy tratando de hacerlo de esta manera: extraigo de la base de datos los valores que anteriormente almacene y con javascript trato de hacer que estos datos estén como opciones seleccionadas por defecto cuando el formulario se abra(no se si sea la mejor solución pero es lo que se me ha ocurrido).
Yo ya he codificado algunas cosas sin problema alguno, pero me he estancado en una parte. Les colocare un código de prueba utilizando un solo select multiple (es solo como muestra para explicar mejor lo que estoy intentando hacer). Digamos que los datos ya los he sacado de la base de datos:


$sentencia = mysqli_query($link, "SELECT * FROM tabla WHERE  fecha = '$date'");
while ($extraido = mysqli_fetch_array($sentencia)) { //se utiliza el while para ir guardando todos los elementos de la consulta.
if ($extraido !== null) {
$primero = $extraido['sun'];
$fecha = $extraido['fecha'];
} 

$segundo = implode(",", $primero);
mysqli_free_result($sentencia);
mysqli_close($link);



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js"></script>
          

    <script type="text/javascript">
      $(document).ready(function(){
      $('.collapsible').collapsible();
      });
    </script>

<script type="text/javascript">
     $(document).ready (function() {
      $('select').material_select();
    });
    $('select').material_select('destroy');

</script>

<br>
<br>
<div class="row">
	<span class="sun"></span>
</div>
<br>
<br>
 	<div class="row">
          <div class="colores">
            <select id="sun_id" multiple="multiple" name="sun[]" class="sunMultiple">
              <option value="0">None</option>
              <option value="1"> Sunny</option>
              <option value="2">Partly sunny</option>
              <option value="3">Not sunny</option>
              
            </select>
              <label for="sun_id">Select Conditions</label>
            </div>
    </div>
</body>
</html>



<script type="text/javascript">
  $(document).ready(function() {
var none = true;
function changeValues () {

	 var sunUpdate = $("#sun_id").val() || [];
	 var recibidos = <?php echo $segundo; ?>; 
         $("#sun_id").val(recibidos);
         sunUpdate = $("#sun_id").val()
    	  var sunTexts = $("#sun_id option:selected").map(function() {
           return $(this).text();
                                }).get();   

 //condicionales
  if(sunUpdate == "") {

    $("#sun_id").val("0");
    // Actualizar los nuevos valores seleccionados
    sunUpdate = $("#sun_id").val()
    //Actualizar el texto de las opciones seleccionadas
    $('.sun').css("font-weight", "normal");
    sunTexts = $("#sun_id option:selected").map(function() {
                  return $(this).text();
                                }).get();
    none = true;
    $('#sun_id').material_select('destroy');
    $('#sun_id').material_select();
  }

 // si la opcion ninguno esta seleccionada pero se selecciona algo diferente

  if (none && (sunUpdate.length > 1 || sunUpdate[0] != "0")) {
     
    $("#sun_id option[value=0]").removeAttr("selected");
    // actualizar los valores seleccionados
    sunValues = $("#sun_id").val()
   
    $('.sun').css("font-weight", " bold");
    sunTexts = $("#sun_id option:selected").map(function() {
                  return $(this).text();
                                }).get();
  
        none = false;
        $('#sun_id').material_select('destroy');
        $('#sun_id').material_select();

  } else if (!none && sunUpdate.indexOf("0") > -1) {
 
    $("#sun_id").val("0");

    sunUpdate = $("#sun_id").val()
 
    $('.sun').css("font-weight", "normal");
    sunTexts = $("#sun_id option:selected").map(function() {
                  return $(this).text();
                                }).get();

    none = true;
    $('#sun_id').material_select('destroy');
    $('#sun_id').material_select();
  }

  document.querySelector('.sun').innerHTML = sunTexts.join(", ");
  $('.sun').html(sunTexts.join(", ")); 

    }
    $("#sun_id").change(changeValues);
    changeValues();
   });

Lo que intento hacer es colocar los valores extraidos de la base de datos como valores seleccionados en el select, y lo logro pero el problema esta cuando quiero editar, o sea seleccionar otros valores o deseleccionar los que estan, al final siempre me quedan los valores que he extraído de la base de datos. Creo que el problema esta en la función js.

Cómo podria solucionar ese problema? La idea es editar el formulario, poder deseleccionar los valores que había guardado previamente y seleccionar otros, o dejar unos y colocar otros, asi sucesivamente. Pero por ejemplo, si esta selecionado la opcion "Sunny" y la intento deseleccionar, entonces igual me aparece como marcada o se me desmarcan otras opciones. Alguna idea como podría solucionar esto?

Tags: AJAX - CSS - CSS3 - Database - HTML - HTML5 - Javascript - Javascript Array - JQuery - MariaDB - MySQL - PHP - PHP7 - Question - Responsive Web Design - Web Votes: 0 - Answers: 1 - Views: 15 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 27-03-2018 09:19:20 Hola
    hay varias forma de hacerlo... todo es referente al segundo formulario
    ejemplo A
    cargo el select con todas las opciones y por medio javascript usa la linea

    $("#id_objeto_select").val(valor_a_seleccionar);

    ejemplo B con php
    en el momento de ir agregando los item al select determino cual deberia estar seleccionado y agrego la palabra selected a la cadena

    for($ind=0;$ind<count($item_select);$ind++)
    {
    echo '<option value="'.$item_select[$ind]['valor']);
    if(condicion)
    { echo "seleted"; }
    echo '">'.$item_select[$ind]['nombre']).'</option>';
    }
      Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In