0

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

4
  • No entiendo tu problema, no estas pudiendo asignar un value distinto al text, o no estas pudiendo seleccionar el option? Commented el 11 jun. 2018 a las 15:20
  • N6 entiendo bien el poblemas, para mi existe dos caso que puede salir cuando selecciona un pais y tiene que salir los estados o la de opcion de editar un registro y tiene seleccionado un select Commented el 11 jun. 2018 a las 15:26
  • Explico mejor mi problema mi select queda con los siguientes valores tras llenarlo: Elegir tablero,2,3,4,5.... por ejemplo selecciono el 2 sigo con la aplicación y oculto el select, llega un momento que el usuario quiere volver a mostrar el select ( para ello ejecuta la funcion cambiar() mediante un botón ) y lo que quiero conseguir es volver a visualizar el select con la opcion "Elegir tablero", en la actualidad se muestra con 2, logicamente, quiero poder cambiar desde el javascript y hacer como si se hubiese seleccionado "Elegir tablero_", no se si me explique mejor?
    – Silvia
    Commented el 11 jun. 2018 a las 15:34
  • No puedo seleccionar el option desde Javascript
    – Silvia
    Commented el 11 jun. 2018 a las 20:00

2 respuestas 2

1

Agrega el attributo "selected" al llenar el select

var arrayBoards = [];
     $('#boards')
        .append($("<option></option>")
        .attr({
            value: '',
            selected:"selected"})
        .text("Elegir un tablero")); 

    $.each(boards, function(index, value) {
        $('#boards')
            .append($("<option></option>")
            .attr("value",value.id)
            .text(value.name)); 
            arrayBoards.push(value.id);
    });
// -- Y en la funcion "cambiar" puedes trabajarlo con Jquery
function cambiar(){
  document.getElementById("tablaSelect").style.display="block";
  // CON JAVASCRIPT NATIVO
  document.getElementById("boards").selectedIndex = 0;
  // CON JQUERY
  // $("#boards").val($("#select option:first").val());
  // ó option:empty
  //  $("#boards").val($("#boards option:empty").val()); 

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>
</div>
<input type="button" onclick="cambiar()"/>

5
  • Muchas gracias, he probado todas las opciones y no consigo visualizar de nuevo el select mostrando la opción de Elegir tablero, ¿ podría ser por la versión de jQuery? tampoco entiendo muy bien porque se debe agregar el atributo selected, gracias por la ayuda
    – Silvia
    Commented el 11 jun. 2018 a las 16:13
  • @Silvia estabas intentando seleccionar el ID "select". Solo abría que reemplazar "select" por "boards" que es el ID de tu select.
    – DMA VE
    Commented el 12 jun. 2018 a las 11:47
  • Siento tardar en responderte gracias, me fue muy útil, una cosa más me cambia el vale seleccionado, pero no me muestra el nombre de este, de la siguiente forma: document.getElementById("#boards").innerHTML= "Elegir tablero"; No se si con tu solucion ya debería mostrar el select "elemento seleccionado" pues no es el caso, se queda en blanco, como que hace el cambio pero no lo muestra, alguna idea? de todos modos muchas gracias :)
    – Silvia
    Commented el 22 jun. 2018 a las 15:29
  • @Silvia He agregado todo el código en un solo bloque para que puedas realizar una prueba completa. Tienes las 2 alternativas, si utilizas Jquery o Javascript nativo
    – DMA VE
    Commented el 22 jun. 2018 a las 15:51
  • Gracias por toda la ayuda, al final solucione mi problema de otro modo, pero esto era lo que quería en un principio
    – Silvia
    Commented el 23 jun. 2018 a las 10:02
0

Para esto tienes primero que poner el id en el en el método para seleccionar elementos estás poniendo select y el id es boards y después sería hacer algo como esto document.getElementById("boards").selectedIndex = 0; pero también tienes que tener claro donde llamas la función cambiar porque no veo en tu código cuando la llamas si quieres que sea al seleccionar una opción en el select deberías hacer esto <select class="select" onchange="cambiar();" id="boards"></select> pero si lo que quieres es ponerla en un botón solo tienes que llamar la función en el evento onclick="cambiar();" espero te resuelva la respuesta

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.