如果选中复选框，则更改选择选项 [英] if checkbox checked change the select options

问题描述

我想根据复选框生成selects选项.就像我有3个值的复选框:Film，Videoclip，Serial和<select>形式.当我单击电影"时，我想使用<select>选项:喜剧，恐怖和恐怖电影.当我视频剪辑" <select>时，会将值更改为:嘻哈，流行.

I would like to generate selects options depends on checkbox. Like I have checkbox with 3 values: Film, Videoclip, Serial and <select> form. When I click "Film" I would like to have <select> with option: Comedy, Horror & when I "Videoclip" <select> will change values to: Hip-Hop, Pop.

我正在尝试使用javascript& jQuery，但还是一无所有:/

I'm trying for a few hours with javascript & jquery but still nothing :/

推荐答案

您可以尝试使用jQuery和类似事件的事件吗?

Can you try using jQuery and events something like this?

$(function () {
  var checked = ["Check 1", "Check 2", "Check 3"];
  var unchecked = ["Uncheck 1", "Uncheck 2", "Uncheck 3"];
  function updateSelect (arr) {
    $("select").html("");
    $.each(arr, function (i, v) {
      $("select").append('<option value="' + v + '">' + v + '</option>');
    });
  }
  updateSelect (unchecked);
  $("#check").change(function () {
    if (this.checked)
      updateSelect(checked);
    else
      updateSelect(unchecked);
  });
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<label><input type="checkbox" id="check" /> Check</label><br />
<select></select>

您的代码段已准备就绪.看看:

Your snippet is now ready. Have a look:

$(function () {
  var iFilm = ["Comedy", "Horror", "Sci-Fi"];
  var iVideoClip = ["Hip-Hop", "Pop", "Rap"];
  var iSerial = ["Serial 1", "Serial 2", "Serial 3"];
  $("input:checkbox").change(function () {
    $("select").html("");
    $("input:checked").each(function () {
      addItemsFromArray(eval("i" + this.id));
    });
  });
  function addItemsFromArray (arr) {
    $.each(arr, function (i, v) {
      $("select").append('<option value="' + v + '">' + v + '</option>');
    });
  }
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<label><input type="checkbox" id="Film" /> Film</label><br />
<label><input type="checkbox" id="VideoClip" /> VideoClip</label><br />
<label><input type="checkbox" id="Serial" /> Serial</label><br />
<select></select>

注意::我强烈建议不要使用eval.不使用eval，另一部分使用的是data-*属性.

Note: I have used eval, which is strongly discouraged. Without using eval, the other part is using data-* attributes.

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

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<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>

换句话说，如果您想一次仅选择一个选项，请随时从type="checkbox"更改为type="radio"并使用相同的名称.

On a different note, if you wanna make only one option selectable at a time, feel free to change from type="checkbox" to type="radio" and give the same name.

这篇关于如果选中复选框，则更改选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！