0

estoy haciendo una peticion a la API de Trello pidiendo unos tableros, actualmente muestro esos tableros en una lista en mi HTML, pero mi intencion es mostrarlos en un select y no se muy bien cómo realizarlo, esta es la manera en la que lo estoy haciendo. Mi código HTML (tendría que ser un select dinámico), pero no encuentro la manera de hacerlo, si tienen alguna idea los agradezco, muchas gracias.

HTML
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>login</title>

    </head>

    <body>

    <div class="app">

      <table id=tabla style="width:100%">
        <tr>
            <th> <select id= tableros">  //Select para rellenar con peticion de Trello
                </select> 
            </th>      

          </tr>

        </table> 
    </div>
         <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
    </body>
</html>

y mi código Javascript

     // Output a list of all of the boards that the member 
            // is assigned to
            Trello.get("members/me/boards", function(cards) {

//El contenido de esta funcion es lo que cambiaría, en vez de listar los tableros quiero añadirlos a un select.
                $cards.empty();
                $.each(cards, function(ix, card) {
                    $("<a>")
                    .attr({href: card.url, target: "trello"})
                    .addClass("card")
                    .text(card.name)
                    .appendTo($cards);
                });  
            });
        });

    };

1 respuesta 1

1

Seria muy parecido a lo que ya tienes, solo que en lugar de crear <a>, creas <option>, y en lugar de añadirlos a $cards, los añades a tu <select id= tableros">:

Trello.get("members/me/boards", function(cards) {

//El contenido de esta funcion es lo que cambiaría, en vez de listar los tableros quiero añadirlos a un select.
    $.each(cards, function(ix, card) {
                $("<option>")
                .attr("value", card.name)
                .text(card.name)
                .appendTo("#tableros");
    });  
});

Solo te faltaria definir que colocarias en cada value

3
  • Muchas gracias, me fue muy útil, permiteme una pregunta más, cómo puedo saber que value ha sido seleccionado? para realizar una acción u otra, así voy bien encaminada var valor= document.getElementsById("select")
    – Silvia
    el 16 mar. 2018 a las 10:25
  • 1
    podrias obtener el valor seleccionado con $("#tableros").val() si lo que necesitas es reaccionar a su seleccion entonces deberias agregar un listener al evento change con $("#tableros").change(function(){ ... })
    – Klaimmore
    el 16 mar. 2018 a las 13:07
  • Estupendo es justo lo que quería, sabes si puedo poner un valor por defecto en el select añadí esto a mi HTML y se sobreescribe al rellerarlo. <select id="tableros" name="select" class="select">Elige un tablero</select>
    – Silvia
    el 17 mar. 2018 a las 11:44

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.