javascript - 将输入文本附加到模态 C# MVC 5

Question

我想如果我的状态改变了，添加另一个文本框，textArea 用于附加评论。正如你在照片上看到的那样，我已经完成了，但是位置不对，因为它对于模态有点棘手。

我的代码如下:请深入了解(.editView):

<div class="modal fade" id="modalEditMerge" tabindex="-1" role="dialog" aria-labelledby="modalEditMerge" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Edit pipeline</h4>
        </div>
        <div class="modal-body">

            <label class="control-label">Client</label>

            @*@Html.DropDownList("client", (SelectList)ViewBag.ClientID, null, new { @class = "form-control" })*@
            <label class="control-label">Field of Cooperation</label>

            @Html.DropDownList("fco", (SelectList)ViewBag.FCOID, null, new { @class = "form-control" })

            <label class="control-label">HR Value</label>


            @*@Html.LabelFor("HR Value","null", new {})*@
            @Html.TextBox("hrvalue", null, new { @class = "form-control" })

            <label class="control-label">Money Value </label>
            @Html.TextBox("moneyvalue", null, new { @class = "form-control" })

            <label class="control-label">Comment</label>

            @Html.TextBox("comment", null, new { @class = "form-control" })

            <label class="control-label">Status</label>

            @Html.DropDownList("status1", (SelectList)ViewBag.StatusID, null, new { @class = "form-control" })


        </div>
        <div class="modal-footer">
            <button id="EditModalNewMerge" type="button" class="modalEdit">Edit</button>
        </div>
    </div>
</div>

 $(document).ready(function() { 
 $('.editView').click(function() {
        var ID = $(this).data('id');
        $("#status1").change(function () //status1 is for my dropDownList Status
   {
            //hide social worker and sponsor stuff
            val = $(this).val();
            if (val == '11') //if is my Status changed to 'Lost' then
   {
                $('#modalEditMerge').append('<input type="aText" id="aText">');
                //show social worker stuff
            } else {
                alert(val); //show sponsor stuff
            }
        });
        //var top = document.getElementById(ID).val();
        //var top = $(this).position().top;
        //alert();
        //createCookie('position', top, 1);
        editID = ID;
        $.ajax({
            url: "/MergePipelineStatus/GetDataFromDb",
            contentType: 'application/json;',
            data: JSON.stringify({ id: ID }),
            type: 'POST',
            success: function(result) {
                if (result.id > 0) {
                    $("#status1").val(result.statusID);
                    $("#hrvalue").val(result.hrvalue);
                    //$("#client").val(result.client);
                    $("#fco").val(result.fco);
                    $("#moneyvalue").val(result.moneyvalue);
                    $("#comment").val(result.comment);


                }
            },
            error: function(valid) {
                //window.location.href = "/Views/ERROR";
                swal("Došlo je do greške!", "Molimo vas da pokušate ponovo!", "error");
            }
        });
    });

    function loadAjax(reason) {
        $.ajax({
            url: "/MergePipelineStatus/EditModal",
            contentType: 'application/json;',
            data: JSON.stringify({ id: editID, status: $("#status1").val(), reason: reason }),
            type: 'POST',
            success: function(result) {

                if (result.boolresponse == true) {
                    $('#modalEditMerge').modal('toggle');
                    //t.ajax.reload();

                    swal({
                            title: "Uspešna izmena",
                            text: "Uspešno ste izmenili stavku!",
                            type: "success",
                            //showCancelButton: true,
                            confirmButtonClass: 'btn-success',
                            confirmButtonText: 'OK',
                            //cancelButtonText: "Odustani",
                            closeOnConfirm: true,
                            //closeOnCancel: false
                        },
                        function(isConfirm) {
                            if (isConfirm) {
                                window.location.href = "/MergePipelineStatus/Index";
                            }
                        });

                } else {

                    swal("Alert!", result.textResponse, "warning");
                }
            },
            error: function(valid) {
                //window.location.href = "/Views/ERROR";
                swal("Došlo je do greške!", "Molimo vas da pokušate ponovo!", "error");
            }
        });
    }
});

那些灰色区域只是一些敏感数据的标记。白色字段应位于状态下方的模态上。我该怎么做？

Answer 1

尝试更改此 $('#modalEditMerge').append('<input type="aText" id="aText">');至 $('#modalEditMerge .modal-body').append('<input type="aText" id="aText">');

更新

如果你想检查一个input在追加之前已经添加了你可以做这样的事情:

if (val == '11')
    {
        if (!$('#modalEditMerge .modal-body #aText').length)
            $('#modalEditMerge .modal-body').append('<input type="aText" id="aText">');
    }