Создание выпадающего списка, пункты которого являются значениями переменных из javascript
У меня есть файл HTML, в котором мне нужно создать выпадающий список. Но пункты этого списка должны быть заданы через js (это нужно для дальнейшей работы).
Код js
function Point(){
this.parent = "no";
this.name = "root";
this.id = "0";
this.kids = [];
this.kidscount = 0;
};
function NewPoint(ItParent, name, id){
this.parent = ItParent;
this.name = name;
this.id = ItParent.id + "." + id;
this.kids = [];
this.kidscount = 0;
ItParent.kids[ItParent.kidscount] = this;
ItParent.kidscount = ItParent.kidscount + 1;
};
var start_point = new Point();
var genre1 = new NewPoint(start_point, "post-apocalypse", "1");
var genre1_1 = new NewPoint(genre1, "zombie", "1");
var genre1_2 = new NewPoint(genre1, "nuclear", "2");
var genre1_3 = new NewPoint(genre1, "nature", "3");
var genre1_4 = new NewPoint(genre1, "long_ago", "4");
var genre2 = new NewPoint(start_point, "point-of-view", "2");
var genre2_1 = new NewPoint(genre2, "first-person", "1");
var genre2_2 = new NewPoint(genre2, "third-person", "2");
var genre2_3 = new NewPoint(genre2, "several-points", "3");
var genre2_4 = new NewPoint(genre2, "constantly-switching", "4");
var genre2_5 = new NewPoint(genre2, "description", "5");
var genre3 = new NewPoint(start_point, "fantasy", "3");
var genre3_1 = new NewPoint(genre3, "mystic", "1");
var genre3_2 = new NewPoint(genre3, "Fantasy_creatures", "2");
var genre3_3 = new NewPoint(genre3, "High-Magic", "3");
var genre3_4 = new NewPoint(genre3, "Low-Magic", "4");
var genre4 = new NewPoint(start_point, "action", "4");
var genre4_1 = new NewPoint(genre4, "fighting", "1");
var genre4_2 = new NewPoint(genre4, "chase", "2");
var genre4_3 = new NewPoint(genre4, "detective", "3");
var genre4_4 = new NewPoint(genre4, "adventure", "4");
var genre5 = new NewPoint(start_point, "main-caracter", "5");
var genre5_1 = new NewPoint(genre5, "Male", "1");
var genre5_2 = new NewPoint(genre5, "Female", "2");
var genre5_3 = new NewPoint(genre5, "Multiple", "3");
var genre5_4 = new NewPoint(genre5, "Not-human", "4");
var genre5_5 = new NewPoint(genre5, "Hero", "5");
var genre5_6 = new NewPoint(genre5, "Antihero", "6");
var genre5_7 = new NewPoint(genre5, "Weak-to-strong", "7");
var genre5_8 = new NewPoint(genre5, "character-development", "8");
var genre6 = new NewPoint(start_point, "relationship", "6");
var genre6_1 = new NewPoint(genre6, "friends", "1");
var genre6_2 = new NewPoint(genre6, "romance", "2");
var genre6_3 = new NewPoint(genre6, "enemies", "3");
var genre6_4 = new NewPoint(genre6, "found-family", "4");
var genre6_5 = new NewPoint(genre6, "enemies-to-lovers", "5");
var genre6_6 = new NewPoint(genre6, "enemies-to-friends", "6");
var genre6_7 = new NewPoint(genre6, "friends-to-lovers", "7");
var genre7 = new NewPoint(start_point, "warnings", "7");
var genre7_1 = new NewPoint(genre7, "death", "1");
var genre7_2 = new NewPoint(genre7, "violence", "2");
var genre7_3 = new NewPoint(genre7, "graphic-description", "3");
Мне нужно, чтобы выводился список жанров genre1 - genre7, и при выборе любого из них, допустим genre1, открывался еще один список дочерних жанров от выбранного, допустим genre1_1 - genre1_4.
Это должно быть реализовано используя только HTML, JavaScript и(или) CSS. Т.е. без Node js, AJAX, php и прочего.
Просто написать список в HTML не подходит.
UPD: Пожалуйста не меняйте способ, которым заданы жанры, это мне нужно для дальнейшей работы. Да, я знаю, что выглядит плохо.
Ответы (1 шт):
new genre ... new genre ... new genre
ужс... вот вам для примера двух мерный массив с парой пунктов:
var genres =[
"post-apocalypse" => [
"zombie",
"nuclear",
"nature",
"long_ago"],
"point-of-view" => [
"first-person",
"third-person",
"several-points",
"constantly-switching",
"description"]
]; // остальное сами вобьете...
ну а предсказуемый вывод массивов, конечно же циклом
выборку самого меню из массива можно сделать например так:
foreach(genres => k as v){console.log(k)}
/*если есть ошибка сильно не пинайте, js'ный foreach сто лет не юзал*/
а его содержимое соответственно так:
let i=0; while(genres[k][i]){console.log[k][i++]}
/* k можно получать из onMouseOver */
ну а каким способом в html переливать данные, выбирай сам:
- document.write();
- в value тега
<output> - innerHTML || outterHTML
- appendChild(createElement());
UPD 2022.12.1 2:51
курсовая, на базе этого поисковик, главные и дочерние, После подтверждения, пойдет поиск по книгам, в id которых есть id соответствующего жанра
эм... если само по себе изобретение такого "поисковика" не было обязательным заданием без которого курсовую не примут, можно его изобретание просто скипнуть взяв IndexedDB и по человечески построить выборку на sql запросах(по сути это ровно такой поисковик уже готовый, встроенный во все современные браузеры).
если совсем кратко о SQL - таблица в любой БД это двухмерный массив в котором каждое значение является одновременно и значением и ключом. для примера:
[
[id, mane, famaly] // имена столбцов(задаются при создании таблицы)
[0, вася, пупкин],
[1, петя, иванов],
[2, лёша, ,кружкин]
]
при такой структуре, запрос `select * where id="1"` выдаст: [1, петя, иванов]
`select name where famaly="кружкин"` выдаст "лёша"
реализовать это через свойство id...потому нужна такая структура
в предложенном мной варианте индексы создаются автоматически которые можно как раз так и использовать, потому и сказал что функционал тот же. впрочем книги не учитывались на тот момент...
если решитесь на вариант с SQL рекомендую такие столбцы:
[id, parent_id, name]
извиняюсь за поведение
у вас прекрасное поведение, тем более по меркам пытающейся самостоятельно склепать курсовую. не за что извиняться =)
если indexedDB всё же под запретом, из альтернатив наиболее вменяемым кажется запихнуть всё в один массив, а для перемещений по нему формировать циклом "запрос".
/*немного псевдо-кода, идею думаю поймёте*/
var genres = [......]; // тут вообще все жанры
var path = []; // массив для ключей
<tag value='detective' onclick="x(this.value, path, genres)">
function x(val, path, genres){
path.push(val); /* новый ключ при "углублении",
нужно еще условие для удаления последнего при "всплытии" */
var targetList=genres, i=-1;
while(path[++i]){ // дергаем ключи из path "вставляя" в genres
targetList=targetList[path[i]]
}
}
ну или куча мелких массивов\объектов почти как у вас, только внутри каждого придется еще создавать массив - список его детей для вывода и чтоб ссылаться на них.
ну как то так