javascript - $ (".class").val() 返回未定义的值

Question

我正在连接 Trello API 并使用板上的列表创建一个。然后我尝试列出每个列表中的所有卡片。从 value 属性获取 ListID 时，它返回“未定义”。这是为什么？

我用 document.getElementById("demo").innerHTML = $(".board").val(); 打印出来

//HTML
<label>Choose from a List of Boards</label>
<div id="output"></div>

<label>Display Cards Below for Board Selected</label>
<div id="outputCards"></div>

<p id="demo"></p>

//Javascript
    var $boards = $("<select>")
            .attr("id", "boards")
        .text("Loading Boards...")
        .appendTo("#output");

    Trello.get("/boards/BOARD_ID/lists", function(boards) {
        $boards.empty();
        $.each(boards, function(ix, board) {
            $("<option>")
            .attr({href: board.url, target: "trello", value : board.id, name : board.id, id : board.id})
            .addClass("board")
            .text(board.name)
            .appendTo($boards);
        });  
    });


    var $cards = $("<div>")
        .text("Loading Cards...")
        .appendTo("#outputCards")
        .appendTo("#demo");

    // This is where I'm trying to return the value
    document.getElementById("demo").innerHTML = $(".board").val();

    var resource = "lists/LIST_ID/cards";
    Trello.get(resource, function(cards) {
        $cards.empty();
        $.each(cards, function(ix, card) {
            $("<a>")
            .attr({href: card.url, target: "trello"})
            .addClass("card")
            .text(card.name)
            .appendTo($cards);
        });  
    }); 

HTML 的输出如下:

<label>Choose from a List of Boards</label>
    <div id="output">
        <select id="boards">
            <option target="trello" value="LIST_ID" name="LIST_ID" id="LIST_ID" class="board">
                List One
            </option>
            ...
        </select>
    </div>

<label>Display Cards Below for Board Selected</label>
<div id="outputCards"></div>

<p id="demo">undefined</p>

Answer 1

我认为这里的主要问题是 board 类仅添加到 Trello.get 回调中的元素。

由于此代码是异步执行的，因此您很可能在执行回调中的代码之前执行 $(".board").val()，即“$(”。 board") 没有返回任何元素。

我会考虑这样的事情

Trello.get("/boards/BOARD_ID/lists", function(boards) {
        $boards.empty();
        $.each(boards, function(ix, board) {
            $("<option>")
            .attr({href: board.url, target: "trello", value : board.id, name : board.id, id : board.id})
            .addClass("board")
            .text(board.name)
            .appendTo($boards);
        });  
        // This is where I'm trying to return the value

        $('#board').change(function () {
            document.getElementById("demo").innerHTML = $(".board:selected").val();
        });
    });