Как создать базу данных, которая будет сохранять выбранный выпадающий список?

Question

Можете ли вы создать базу данных с этим? И как бы вы это отобразили?

data.iFilm = ["Comedy", "Horror", "Sci-Fi"];
data.iVideoClip = ["Hip-Hop", "Pop", "Rap"];
data.iSerial = ["Serial 1", "Serial 2", "Serial 3"];

Так что это HTML

<label><input type="checkbox" id="Film" data-content="iFilm" /> Film</label><br />
<label><input type="checkbox" id="VideoClip" data-content="iVideoClip" /> VideoClip</label><br />
<label><input type="checkbox" id="Serial" data-content="iSerial" /> Serial</label><br />
<select></select>

А это Javascript

$(function () {
  var data = {};


 data.iFilm = ["Comedy", "Horror", "Sci-Fi"];


     data.iVideoClip = ["Hip-Hop", "Pop", "Rap"];
      data.iSerial = ["Serial 1", "Serial 2", "Serial 3"];

  $("input:checkbox").change(function () {
    $("select").html("");
    $("input:checked").each(function () {
      addItemsFromArray(data[$(this).attr("data-content")]);
    });
  });
  function addItemsFromArray (arr) {
    $.each(arr, function (i, v) {
      $("select").append('<option value="' + v + '">' + v + '</option>');
    });
  }
});

Например, в поле, когда явыберите фильм, и мои варианты появились Comedy, Horror, Sci-fi, и вы выбираете Horror

Как вы это делаете? Как вы создаете базу данных из того, что будет сохранять выбранный выпадающий ужас, как он будет сохранять в базе данных? Как вы будете отображать комедию только тогда, когда хотите ее увидеть?
Например, вы откроете профиль пользователя

Answer 1

Следующее должно выполнить работу (теперь с использованием функций ES6):

var data={film:["Comedy", "Horror", "Sci-Fi"],
          clip:["Hip-Hop", "Pop", "Rap"], 
        serial:["Serial 1", "Serial 2", "Serial 3"]};

$(function(){
 $('input:checkbox').click(e=>  // assign click event handler
  $('#choices').html(           // (re-)assign options to select
   $('input:checkbox:checked')  // find all checked checkboxes
    .toArray()                  // make Array from jquery object
    .reduce((opts,c)=>opts.concat(data[c.id]),[]) // combine all sub-arrays
    .map(o=>'<option value="'+o+'">'+o+'</option>').join('') // options
  )
 )
$('select').change(ev=>{
 try {
localStorage.setItem(this.id,this.value)}
 catch(err){nolosto()}
 });
$('#showchoice').click(ev=>{
 try{
 console.log(localStorage.getItem('choices'))}
 catch(err){nolosto()}
 });
});
function nolosto(){console.log(`unfortunately, this fiddle is sandboxed,
 therefore localStorage does not work here`);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" id="film"/> Film</label><br/>
<label><input type="checkbox" id="clip"/> VideoClip</label><br/>
<label><input type="checkbox" id="serial"/> Serial</label><br/>
<select id="choices"></select><br/>
<button id="showchoice">show</button>

После комментария ОП я добавил localStorage способ сохранения выбранной информации. К сожалению, этот механизм не работает в скрипте SO, поэтому он не может быть продемонстрирован здесь полностью.

В "нормальной" ситуации localStorage будет сохранять сохраненные пользовательские значения между сеансами до тех пор, покаПользователь решает удалить локальный кеш своего браузера.