Dynamic Select with Javascript + jQuery with a Trello API request

Question

Dynamic Select with Javascript + jQuery with a Trello API request

Navigation

#1 by (1 votes)

0

I am making a request to the Trello API asking for some boards, I am currently showing those boards in a list in my HTML, but my intention is to show them in a select and I do not know how to do it, this is the way in which I'm doing. My HTML code (it would have to be a dynamic selection), but I can not find a way to do it, if you have any idea I appreciate it, thank you very much.

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>

and my Javascript code

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

    };

javascript jquery select

asked by Silvia 15.03.2018 в 18:38

source

1 answer

Display data from one database depending on values in another table Error: JQuery and AJAX

score 1 · Accepted Answer

It would be very similar to what you already have, but instead of creating <a> , you create <option> , and instead of adding them to $cards , you add them to your <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");
    });  
});

You just need to define what you would put in each value