我正在尝试从多种形式中选择一个特定的元素，但是它不能正常工作：
所以我的JavaScript代码是：
function makeActive(target)
{
$("div.interactive").removeClass("interactive");
$("#form" + target).addClass("interactive");
}
$(document).ready(function () {
$('.interactive option[name=bu]').on('change', function () {
$('.interactive option[name=discipline]').empty();
$('.interactive option[name=project]').empty();
$('.interactive option[name=role]').empty();
$.ajax({
type: 'GET',
url: '@Url.Action("GetList", "Central")',
dataType: 'Json',
data: { InitiateId: $('.interactive option[name=bu]').val(), InitiateType: "BU" },
success: function (data) {
console.log("That was calling")
$('.interactive option[name=discipline]').append('<option value="">Select</option>');
$.each(data, function (index, value) {
$('.interactive option[name=discipline]').append('<option value="' + value.Id + '">' + value.Name + '</option>');
});
$('.interactive option[name=project]').append('<option value="">Select Discipline firt</option>');
$('.interactive option[name=role]').append('<option value="">Select Project first</option>');
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
});
cshtml的struct页面是：
<div id="faq" role="tablist" aria-multiselectable="true">
@foreach (var actor in Model)
{
string areacontrol = "answer" + actor.Id;
count +=1;
bool open = false;
if (ViewBag.actor != null)
{
if (actor.Id == ViewBag.actor.Id)
{
open = true;
}
}
else
{
if (count == 1)
{
open = true;
}
}
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="questionOne">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#faq" href="#@areacontrol" aria-expanded="false" aria-controls="answerOne"
onclick=" makeActive(@actor.Id)">
@actor.Name (@actor.Email)
</a>
</h5>
</div>
<div id="@areacontrol" class="panel-collapse collapse @(open?" in":"")" role="tabpanel" aria-labelledby="questionOne">
<div class="panel-body">
@using (Html.BeginForm("Assign", "Central", FormMethod.Post))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
string form = "form" + actor.Id;
<div class="row form-group @(open?" interactive":"")" id="@form">
<div class="col-md-3 col-md-offset-0">
<label for="bu">Business Unit</label>
<select name="bu" class="form-control">
<option value="">--Select--</option>
@foreach (var item in flowcontext.ContiBusinessUnits.ToList())
{
if (ViewBag.bu != null && actor.Id == ViewBag.actor.Id)
{
bool selected = false;
if (ViewBag.bu.Name == item.Name)
{
selected = true;
}
if (selected)
{
<option value="@item.Id" selected>@item.Name</option>
}
else
{
<option value="@item.Id">@item.Name</option>
}
}
else
{
<option value="@item.Id">@item.Name</option>
}
}
</select>
</div>
<div class="col-md-3">
<label for="discipline">Discipline</label>
<select name="discipline" class="form-control">
@if (ViewBag.discipline != null && actor.Id == ViewBag.actor.Id)
{
<option value="@ViewBag.discipline.ID">@ViewBag.discipline.Name</option>
}
else
{
<option value="">Select Business Unit first</option>
}
</select>
</div>
<div class="col-md-3">
<label for="project">Project</label>
<select name="project" class="form-control">
@if (ViewBag.project != null && actor.Id == ViewBag.actor.Id)
{
<option value="@ViewBag.project.ID">@ViewBag.project.Name</option>
}
else
{
<option value="">Select Discipline first</option>
}
ViewBag.role_id = contiRole;
</select>
</div>
<div class="col-md-3">
<label for="destination">Role</label>
<select name="role" class="form-control">
@if (ViewBag.role != null && actor.Id == ViewBag.actor.Id)
{
<option value="@ViewBag.role.ID">@ViewBag.role.Name</option>
}
else
{
<option value="">Select Project first</option>
}
</select>
</div>
<div class="col-md-3" style="display:none">
<label for="destination">User Id</label>
<select name="userid" class="form-control">
<option value="@actor.Id" selected>@actor.Name</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-3 col-md-offset-8">
<input type="submit" class="btn btn-primary btn-block" value="Add">
</div>
</div>
}
</div>
</div>
</div>
}
</div>
<!--end language: lang-html -->
在foreach循环中，我加载/生成了一个表单。
第一：引导崩溃将为第一个用户（演员）开放；
在内部，我有一个与之相似的表格，必须是级联下拉选择！
当我进行更改[$('.interactive option[name=bu]').on('change', function (){}]时，需要我使用控制器方法，该方法将向我返回一个列表，并使用该列表生成第二个字段，并再次为其他2个字段生成！
这有助于我为form进行级联选择，并且效果很好，但仅适用于第一个！
我认为我没有做出正确的选择，或者使用ajax, "$ (document) .ready"无法正确获取数据。
如何正确选择或告诉其他方法！
如何改善它并使之适用于所有form元素？
答案 0 :(得分：1)
在此示例中，您好，我们使用元素共享的commun类从下拉列表中以不同形式获取所选值，然后将其保存在包含下拉列表名称，所选值和所选内容的数组中值文本。
let options = document.querySelectorAll('.cmbMsg');
//get all select boxes with the same class
var values = [];
options.forEach(function(option) {
values.push({"item":option.getAttribute("name"),"value":option[option.selectedIndex].value,"text":option[option.selectedIndex].text});
});
console.log(values);.cmbMsg {
font-size:14px;
}<form action="" id="form1">
<select name="select1" id="select1" class="cmbMsg">
<option value="1" selected>Hello </option>
<option value="2">My friend</option>
</select>
</form>
<br>
<form action="" id="form2">
<select name="select2" id="select2" class="cmbMsg">
<option value="1">Hola</option>
<option value="2" selected>Mundo</option>
</select>
</form>
<br>
<form action="" id="form3">
<select name="select3" id="select3" class="cmbMsg">
<option value="1">Viva</option>
<option value="2" selected>la France</option>
</select>
</form>
希望有帮助
答案 1 :(得分：0)
我找到了解决方法！
问题是，在使用ajax进行更改后，我无法识别我的选择，我只是在页面加载后立即加载所有字段，并为每种表单将它们分组！
$(form + 'select[name=bu]').on('change', function (){};
我只是调用一个函数来获取所有actorid并推送列表并为所有字段“租赁”；