1

У меня есть файл 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: Пожалуйста не меняйте способ, которым заданы жанры, это мне нужно для дальнейшей работы. Да, я знаю, что выглядит плохо.

5
  • То, что нужно - понятно. Теперь поясните в чём проблема и что не так 29 ноя 2022 в 14:08
  • Я не понимаю, как мне создать список, в котором пункты будут являться значениями переменных из js. 29 ноя 2022 в 14:09
  • да как обычно это делается: через createElement с установкой атрибутов а-ля element['attributeName'] = attributeValue, потом этот element через например append добавить в контейнер.... а все эти Point можно в массив добавить и потом просто циклом по нему бежать и вызывать метод create (который вы сами напишите как я описал выше) 29 ноя 2022 в 14:15
  • @АлексейШиманский можете в ответ написать, как это делается? Желательно с простым примером. 29 ноя 2022 в 14:19

1 ответ 1

2

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 переливать данные, выбирай сам:

  1. document.write();
  2. в value тега <output>
  3. innerHTML || outterHTML
  4. 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]]
    }
  }

ну или куча мелких массивов\объектов почти как у вас, только внутри каждого придется еще создавать массив - список его детей для вывода и чтоб ссылаться на них.

ну как то так

9
  • Как мне сделать список? Я знаю как данные добавить в HTML, как мне их сделать именно как список, а не просто засунутые в div значения переменных? Т.е. чтобы можно было выбрать пункт из списка и с ним дальше работать, а не просто наведением мыши. И да, может это и ужас, но мне нужно именно такое, эту часть пожалуйста не меняйте. 29 ноя 2022 в 15:37
  • @DaraHessesh и дальше с ним работать смотря что под этим подразумеваете, опишите конкретнее. но если наугад первое что приходит в голову из стандартного - куча radio или select. но мне нужно именно такое много почти одинаковых объектов? единственное что кмк это дает, возможность наследовать только один определенный пункт куда угодно или наоборот что угодно наследовать в него. только зачем. один пункт не пару гигов весит, следовательно оперативы на этом не съэкономить... в остальном функционал никак не убавился, скорее даже наоборот.
    – puffleeck
    29 ноя 2022 в 17:16
  • Вопрос был не про то, как выглядят мои объекты и как их сделать лучше. Вопрос в том как сделать выпадающий список, пункты которого задаются через javascript. Именно список, а не просто вывод в div в HTML. 29 ноя 2022 в 18:00
  • @DaraHessesh, ну так и расскажи что подразумеваешь под "дальше работать с этим списком". без этого совсем не ясно чего хочешь и потому не ясно что советовать
    – puffleeck
    29 ноя 2022 в 22:55
  • @puffleek Это моя курсовая, и мне нужно дальше на базе этого сделать поисковик. Идея в том, что есть "главные" жанры, а есть их "дочерние", и если я ищу "главный", мне должны выводиться и дочерние от него, но при поиске дочерних выводится только то, что ищешь. Реализовать это предполагалось через переменную id в каждом жанре (сам поисковик еще не готов). Поэтому мне нужна вот эта структура именно такая, как я ее сделала. Я просто не успеваю переделать даже если вы предложите мне лучший вариант (придется менять отчет, а там много). Допишу следующим комментарием. 30 ноя 2022 в 13:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.