如何使用javascript更新选择标签的值，这些值可以是多个值答案

【问题标题】：how to update the value of select tag using javascript and these values can be multiple vaues如何使用javascript更新选择标签的值，这些值可以是多个值
【发布时间】：2017-06-24 17:06:00
【问题描述】：

    var expanded = false;

    function showCheckboxes() {
        var checkboxes = document.getElementById("checkboxes");
        if (!expanded) {
            checkboxes.style.display = "block";
            expanded = true;
        } else {
            checkboxes.style.display = "none";
            expanded = false;
        }
    }

.selectBox {
        position: relative;
    }

        .selectBox select {
            width: 100%;
            font-weight: bold;
        }

    .overSelect {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    #checkboxes {
        display: none;
        border: 1px #dadada solid;
    }

        #checkboxes label {
            display: block;
        }

            #checkboxes label:hover {
                background-color: #1e90ff;
            }

<form>
  <label>Department</label>
  <div>
    <div class="selectBox" onclick="showCheckboxes()">
      <select  class="form-control">
        <option>-Select a Department-</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label>
        <input type="checkbox" id="1" />bscs<br>
        <input type="checkbox" id="1" />bsit<br>
        <input type="checkbox" id="1" />mscs<br>
        <input type="checkbox" id="1" />msit<br>
        <input type="checkbox" id="1" />bba<br>
        <input type="checkbox" id="1" />Dpt<br>
      </label>
    </div>
  </div>
</form>

我在下拉列表中使用复选框并由动态值填充，我想从列表中获取选中的值并在表单中提交这些值。

Controller的Action方法代码

FYP_DB_Entities obj = new FYP_DB_Entities();

    public ActionResult Index()
    {
        ViewBag.dept = obj.Departments.ToList();

        return View();
    }

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

<div>
  <div class="selectBox" onclick="showCheckboxes()">
    <select class="form-control">
                                    <option>-Select a Department-</option>
                                </select>
    <div class="overSelect"></div>
  </div>
  <div id="checkboxes">
    @foreach (var s in ViewBag.dept) {
      <label for="@s.Department_Id"><input type="checkbox" id="@s.Department_Id" />@s.Department_Id</label> 
    }
  </div>
</div>

这是单击下拉列表之前的屏幕截图

点击后

【问题讨论】：

使用<> sn-p 编辑器创建minimal reproducible example 用HTML 和JS 而不是模板
如果您将它们包装在表单中，它们将被提交
@mplungjan 它已经被包裹在
标签中
那么问题出在哪里？控制台错误？服务器错误？
@mplungjan 现在我已经添加了代码 sn-p

标签： javascript html css asp.net-mvc foreach

【解决方案1】：

做到这一点最简单和棘手的方法是将复选框代码保留在表单标签中，并为所有具有 不同 ids 的复选框使用同名（以使它们为标签标签的“for”属性工作）。此外，将复选框的值设置为部门 ID。您的代码将如下所示：

<div id="checkboxes">
    @foreach (var s in ViewBag.dept) {
      <label for="@s.Department_Id"><input type="checkbox" id="@s.Department_Id" name="selectedDepartmentIds" value="@s.Department_Id" />@s.Department_Id</label> 
    }
  </div>

在控制器的操作中添加一个名为 selectedDepartmentIds 类型数组的新参数。当您提交表单时，您将获得选定的部门 ID。

【讨论】：