Cambiar el value de un select llenado dinamicamente desde Javascript

publicado por: Anonymous

Tengo un select que relleno dinamicamente con datos que recibo en un JSON, el usuario elige despues un valor y continua utilizando la aplicación, estoy intentando que al volver a mostrar ese select al pulsar un boton me vualva a aparecer con un option predeterminado que esta definido como “Elegir tablero” pero no consigo cambiar el selec desde Javascript para que muestre esa opción, tengo esto imlementado
HTML:

 <div id="tablaSelect">
    <table id=tabla2 style="width:80%" >
    <tr>  
      <th>
        <div class="styled-select">
          <select class="select" id="boards">
          </select>
        </div>
     </th>
    </tr>
   </table>

Javascript para llenar el select:
//Montar el select con los tableros

$('#boards')
            .append($("<option></option>")
            .attr("value",'')
            .text("Elegir un tablero")); 

        $.each(boards, function(index, value) {
            $('#boards')
                .append($("<option></option>")
                .attr("value",value.id)
                .text(value.name)); 
                arrayBoards.push(value.id);
        });

Javascript para cambiar el select:

function cambiar(){
 document.getElementById("tablaSelect").style.display="block";
 document.getElementById("select").value = '0'; //No se hace así porque no tengo values
}

Alguna idea de cómo hacer que al ejecutar la función cambiar se muestre el select con la opcion “Elegir tablero”??? muchas gracias 🙂

solución

Agrega el attributo “selected” al llenar el select

_x000D_

_x000D_

var arrayBoards = [];_x000D_
     $('#boards')_x000D_
        .append($("<option></option>")_x000D_
        .attr({_x000D_
            value: '',_x000D_
            selected:"selected"})_x000D_
        .text("Elegir un tablero")); _x000D_
_x000D_
    $.each(boards, function(index, value) {_x000D_
        $('#boards')_x000D_
            .append($("<option></option>")_x000D_
            .attr("value",value.id)_x000D_
            .text(value.name)); _x000D_
            arrayBoards.push(value.id);_x000D_
    });_x000D_
// -- Y en la funcion "cambiar" puedes trabajarlo con Jquery_x000D_
function cambiar(){_x000D_
  document.getElementById("tablaSelect").style.display="block";_x000D_
  // CON JAVASCRIPT NATIVO_x000D_
  document.getElementById("boards").selectedIndex = 0;_x000D_
  // CON JQUERY_x000D_
  // $("#boards").val($("#select option:first").val());_x000D_
  // ó option:empty_x000D_
  //  $("#boards").val($("#boards option:empty").val()); _x000D_
_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<div id="tablaSelect">_x000D_
<table id=tabla2 style="width:80%" >_x000D_
<tr>  _x000D_
  <th>_x000D_
  <div class="styled-select">_x000D_
  <select class="select" id="boards">_x000D_
  </select>_x000D_
</div>_x000D_
</th>_x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
<input type="button" onclick="cambiar()"/>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *