javascript - 从多个表单中选择特定元素

Question

我正在尝试从多个表单中选择一个特定元素，但它无法正常工作:

所以我的 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 循环中，我加载/生成了一个表单。第一:bootstrap collapse 将对第一个用户(actor)开放；在里面，我有一个表格必须是相似的并且是级联下拉选择!

当我进行更改时[ $('.interactive option[name=bu]').on('change', function (){}] 为我调用一个 Controller 方法返回给我一个列表，并使用该列表生成第二个字段并再次生成其他 2 个字段!这有助于我为 form 进行级联选择，效果很好，但仅适用于第一个!

我认为要么我没有正确选择，要么使用 ajax, "$ (document) .ready" 没有正确获取数据。我如何才能正确选择或告诉别人方法!
如何改进它并使其适用于所有 form 元素？

Answer 1

您好，在这个例子中，我们使用元素共享的公共(public)类从不同形式的下拉列表中获取所选值，然后我们将该值保存在一个数组中，该数组包含下拉列表的名称、所选值和所选值文本。

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>

希望对你有帮助