获取复选框以显示是否选择了某个子类别下的某个项目

Question

我刚刚问过这个question。

但是现在我使用了那个解决方案，我想知道是否有更有效的方法来完成这个。

我的下拉列表是由我的数据库中的一个表创建的。假设我的表如下所示：

|ID|    |SuperHero|    |Category|
 1       Batman          DC
 2       Superman        DC
 3       Aquaman         DC
 4       Spiderman       Marvel
 5       Ironman         Marvel
 6       Hulk            Marvel

有了这个表格的想法，我的下拉列表看起来类似于：

1. 直流
   • 蝙蝠侠
   • 超人
   • 海王
2. 漫威
   • 蜘蛛侠
   • 钢铁侠
   • 绿巨人

这是由这个创建的：

ViewBag.SuperHero = new SelectList(db.superhero, "ID", "SuperHero", "Category", null,null);

现在，如果您查看我上面提出的问题的链接。我有一个复选框，只有在下拉列表中选择了某些值时才需要显示该复选框。

所以，按照我在另一个问题中给出的解决方案，我必须这样做：

$(document).ready(function () {

    $("#chkbox").hide();

    $('#superhero').change(function () {
        var selectedActivity = $(this).val();
        $('#chkbox').hide();
        if (selectedActivity === "1", "2", "3") {
            $('#chkbox').show();
        }
    });    
});

因此，如果选择了来自 DC 的任何超级英雄，则会显示该复选框。

如果CategoryDC下有任何值，可以用Javascript做些什么，显示复选框？我觉得这可能更有效和节省时间，而不是我必须手动输入每个不同的值数字..

无论如何我都没有问题！我只是想知道是否有更有效的方法来实现这一点。

感谢任何帮助。

更新：

由new SelectList()生成的HTML：

<div class="form-group">
        <label class="control-label col-md-2 required" for="superhero">SuperHero</label>
        <div class="col-md-10">
            <select class="form-control" id="superhero" name="superhero"><option value="">-- Select SuperHero --</option>
                <optgroup label="DC">
                    <option value="1">Batman</option>
                    <option value="2">Superman</option>
                    <option value="3">Aquaman</option>
                </optgroup>
                <optgroup label="Marvel">
                    <option value="4">Spiderman</option>
                    <option value="5">Ironman</option>
                    <option value="6">Hulk</option>
                </optgroup>
                <span class="field-validation-valid text-danger" data-valmsg-for="superhero" data-valmsg-replace="true"></span>
        </div>
    </div>

Answer 1

当然。只需检查所选选项的父标签

$(document).ready(function () {

  $("#chkbox").hide();

  $('#superhero').change(function () {
    var selectedOptGroup = this.options[this.selectedIndex].parentNode.label;
    $('#chkbox').hide();
    if (selectedOptGroup === "DC") {
      $('#chkbox').show();
    }
  });    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="control-label col-md-2 required" for="superhero">SuperHero</label>
  <div class="col-md-10">
    <select class="form-control" id="superhero" name="superhero"><option value="">-- Select SuperHero --</option>
      <optgroup label="DC">
        <option value="1">Batman</option>
        <option value="2">Superman</option>
        <option value="3">The Flash</option>
      </optgroup>
      <optgroup label="Marvel">
        <option value="4">Spiderman</option>
        <option value="5">Ironman</option>
        <option value="6">Hulk</option>
      </optgroup>
    </select>
    <span class="field-validation-valid text-danger" data-valmsg-for="superhero" data-valmsg-replace="true"></span>
  </div>
</div>
<input type="checkbox" id="chkbox">