Я пытаюсь выбрать определенный элемент из нескольких форм, но он не работает должным образом:
Итак, мой код 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:
<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 элементов?