Coding list in dropdown menu

CS Principles Coding and Debugging Help
1

Is it possible to populate the dropdown choices from a list? Here is what I have tried:

What happens is that the dropdown is added but everything is on one line rather than each line being a separate choice. My search algorithm is still sketchy, but its just the formatting the dropdown I can’t figure out, thanks!

var Platform = getColumn(“Best Selling Video Games”, “Platforms”);
var Publisher = getColumn(“Best Selling Video Games”, “Publisher”);
var UniquePlat = ;
UniquePlat[0] = Platform[0];
var UniquePub = ;
UniquePub[0] = Publisher[0];
var temp;

console.log("Platform = " + Platform[0]);
console.log("UniquePlat = " + UniquePlat[0]);

for (var i = 0; i < 50; i++) {
for (var j = 0; j < UniquePlat.length; i++) {
if (Platform[i] != UniquePlat[j]){
temp = Platform[i];
j = UniquePlat.length;
}
}
appendItem(UniquePlat, temp);
}

for (i = 0; i < 50; i++) {
for (j = 0; j < UniquePub.length; i++) {
if (Publisher[i] != UniquePub[j]){
temp = Publisher[i];
j = UniquePub.length;
}
}
appendItem(UniquePub, temp);
}

console.log(UniquePub.length);
for (i = 0; i < UniquePub.length; i++) {
console.log(UniquePub[i]);
}

setProperty(“PlatformDropdown”, “options”, [UniquePlat]);
setProperty(“PublisherDropdown”, “options”, [UniquePub]);

2

Hello,

Generally your theory works, except instead of [UniquePlat] being your input, you need to actually input the index: UniquePlat[0]. You can add more parameters, but you’d need to know the length of the list which makes this tricky because it may vary depending on the input.

I can think of a few ways to do it, but none particularly easy and none that I would fee comfortable teaching a student at this level. I’ll keep thinking!

1 Like
3

Did anyone figure out how to do this? My students need to do this (use a list created in the code as the options for a dropdown list on a secondary screen) for the Hackathon project. Thanks!

4

I found a youtube video that shows you how to populate the dropdown menu from a list. You have to fill the dropdown menu options, then you can select from the dropdown.

Here is the table I took the author from:
var author=getColumn(“Best Selling Books”, “Author”);
The dropdown box is authorDropDown. The authors get displayed in displayAuthors.

onEvent(“fillButton”, “click”, function( ) {
setProperty(“authorDropDown”,“options”, author);
setText(“displayAuthors”, filteredBookList.join(“\n”));
if(index<author.length-1){
index++;
}else{
index=0;
}
});

//THE 2 ONEVENTS BELOW FILL THE DROPDOWN BOX FROM A LIST
onEvent(“authorDropDown”, “click”, function( ) {
authorChoice=getText(“authorDropDown”);
filterAuthor();
});

//THIS FUNCTION FILTERS THE DATA BY AUTHOR
function filterAuthor(){
filteredAuthor=;
filteredBookList=;
for (var i = 0; i < author.length-1; i++) {
if (author[i]==authorChoice){
appendItem(filteredAuthor, author[i]);
appendItem(filteredBookList, bookList[i]);
}
}
}

5

Well I may or may not have gone overboard with this… but I may explain it later anyways here’s the link https://studio.code.org/projects/applab/JDoHSJdkOKONeq4uL3cqfT73JP5wR-hxl3FVSqXjNW4/view

6

switch has bugs in App Lab. I recommend not using it.

7

@jdonwells Oh really? I never really knew… I’ll update the code as such! i did realize it bugging sometimes and couldn’t figure out why

8

Here is what I gave my students who wanted to populate the options on a dropdown box from a list. It works.

FILLING THE DROPDOWN MENU FROM A LIST

This is how to upload a dropdown box from a list. I want to upload the Author column from the Table: Best Selling Books. I am calling the list for the dropdown menu author. The dropdown menu is call “authorDropDown”.

var authorList=getColumn(“Best Selling Books by Author”, “author”);

//THIS ONEVENT AND FUNCTION WILL FILL THE DROPDOWN BOX FROM A LIST

onEvent(“authorDropDown”, “click”, function( ) {
authorChoice=getText(“authorDropDown”);
console.log(authorChoice);
fillDropDown();
});

function fillDropDown() {
setProperty(“authorDropDown”,“options”,author);
if(index<author.length-1){
index++;
}else{
index=0;
}
}