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>');
    });
  }
});

例如，当我选择电影并且我的选项出现在喜剧，恐怖，科幻和您选择恐怖的复选框时，

您如何做到的？您如何从中创建一个数据库来保存选定的下拉恐怖，它将如何保存在数据库中？您只想在视图中只显示喜剧？
例如，您将打开用户个人资料

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>

在OP的评论之后，我添加了一种localStorage保存所选信息的方法。不幸的是，这种机制不能在SO提琴中起作用，因此无法在此处完整演示。

在“正常”情况下，localStorage将在会话之间保留存储的用户值，直到用户决定删除其浏览器的本地缓存为止。

如何创建将保存所选下拉列表的数据库？

1 个答案: