c# javascript select2 无法与来自 Ajax 的组合框一起使用

Question

如果我单击按钮 [+]，组合框将增加，但 javascript/select2 无法使用我从 Ajax.

获得的组合框

查看代码：

<input type="text" id="Jumlah" name="Jumlah" value="1" />
<div class="form-group">
    <div class="col-md-2">
        Pegawai<font class="text-danger">*</font>
    </div>
    <div class="col-md-1 text-right">
        1.
    </div>
    <div class="col-md-7">
        <input name='ComboboxPegawai_1' type="text" class="selectbox-o" style="width: 100%" />
    </div>
    <div class="col-md-2">
        <a class="btn btn-default" onclick="TambahPgw()">
            <span class="glyphicon glyphicon-plus"></span>
        </a>
    </div>
</div>
<div id="FormPegawai">

</div>

和脚本：

<script type="text/javascript">
    $(function () {
        $('.selectbox-o').select2({
          minimumInputLength: 0,
          ajax: {
               url: '@Url.Action("SearchPegawai", "Pegawai")',
               type: "post",
               dataType: 'json',
               data: function (term, page) {
                   return {
                      q: term
                   };
               },
               results: function (data, page) {
                    return { results: data };
                 }
              }
            });
        });


//this function for calling ajax to get new combobox

    function TambahPgw() {
        var x = parseInt($('#Jumlah').val());
        $.ajax({
            type: 'POST',
            data: {
                Jumlah: $('#Jumlah').val()
            },
            url: "/Coba/AjaxTambahPegawai/",
            success: function (data) {
                $("#FormPegawai").html($("#FormPegawai").html() + data);
                $('#Jumlah').val(x + 1);
            },
        });
    }
</script>

在控制器中，ajax 到 return 组合框：

public string AjaxTambahPegawai()
    {
        var Jumlah = Int32.Parse(Request["Jumlah"]) + 1;
        var form = "<div class='form-group'><div class='col-md-2'></div>" +
                   "<div class='col-md-1 text-right'>" + Jumlah + ".</div>" +
                   "<div class='col-md-7'>" +
                        "<input name='ComboboxPegawai_" + Jumlah + "' type='text' class='selectbox-o' style='width: 100%' />" +
                   "</div></div>";

        return form;
    }

也许 javascript 必须重新加载，但如何加载？我试图为 select2 制作一个函数并放在 ajax -> success: function (data) { //functionselect2 }

但如果我在第一个组合框上进行了选择并单击按钮 [+]，则所选内容会丢失，因为组合框会再次重新加载

Answer 1

将 html 放入 DOM 后，您需要使用 select2 初始化新输入。

$(".selectbox-o:last").select2(<options here!>);

但我认为这不是最佳解决方案...为什么要从控制器传递 html 数据而不是加载视图？

NS

Answer 2

在您的 ajax url 中，您没有引用文件。将其更改为：

/Coba/AjaxTambahPegawai.js

然后，将调用 AjaxTambahPegawai 的方式更改为函数：

function AjaxTambahPegawai(){
//stuff
return form;
}

您可能还想分隔行：

var Jumlah = Int32.Parse(Request["Jumlah"]) + 1;

从函数调用，而是将 Jumlah 作为参数传递给 AjaxTambahPegawai。

c# javascript select2 无法与来自 Ajax 的组合框一起使用

c# javascript select2 not working with combobox from Ajax

javascript

c#

jquery

html

asp.net