简体   繁体   中英

Populate a Select Box using javascript

I've looked everywhere, but I can't find a solution to this problem. I've spent hours debugging, and I can't figure it how myself either. I'm sorry if this is an easy fix, I just can't seem to get it.

I have an empty select box as shown here:

<p id='draftChoice' class='hide'>
    Select draft choice:
    <select id='draftList'>
    </select>
    <input type=submit value='Draft' id='draft'>
</p>

When you click draft, this will run:

draftRound = function() {
var draftee = document.getElementById('#draftList').value;
prospectPool.splice(draftee, 1);
prospectPool.players.splice(0, 13);
};

However, I get an error: "Uncaught TypeError: Cannot read property 'value' of null" on this line:

var draftee = document.getElementById('#draftList').value;

My best guess is that it the value isn't being properly defined when I populate the box, which I do here:

createDraftList = function() {
//$('#right').html("");
//$('#draftList').html("");
for (var i = 0; i < prospectPool.players.length; i++) {
    $('#right').append("<h4>" + prospectPool.players[i].name + "</h4><div><p>" + prospectPool.players[i].overall + "<br>" + prospectPool.players[i].position + "<br>" + prospectPool.players[i].playerType);
}
$('#right').accordion();
$('#draftChoice').removeClass('hide');
    $(prospectPool.players).each(function() {
        $('#draftList').append($("<option>").attr('value',this.name).text(this.name))  + "</option>";
    });
 };

As a follow up question, I want to have multiple 'rounds' of this draft. When I do, I want to update the select box, as well as the accordion I have on the screen (populated in the last block of text). My current method used the two commented out lines. When I do this, the correct text shows up, but I lost my accordion formatting, and I have no idea why. Anybody who can help, I greatly appreciate it!

Change

document.getElementById('#draftList')

to

document.getElementById('draftList')

The # is only used in CSS. When you're grabbing an element by ID, it only needs to actual ID.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM