Question

当我动态创建元素时，选择的插件无法正常工作

我从ajax响应中动态创建了选择列表，问题是选择的插件无法使用它，请帮我解决一下

这是我的代码：

function GetSubCategories(ID) {
    $.ajax({
        cache: false,
        url: '/Home/GetSubCategoriesByAjax',
        type: 'GET',
        datatype: 'Json',
        data: { id: ID },

        success: function (data) {
            if (data.length > 0) {
                console.log(data)


                $("#SubListSelect").empty();
                var $SubListSelect = $('<select id ="SubListSelect" class = "form-control"></select>');
                $SubListSelect.append('<option>Select Sub Category</option>');
                $.each(data, function (i, value) {



                    $SubListSelect.append('<option value=' + value.SubCategoryId + '>' + value.SubCategoryName + '</option>');
                });

                $("#Div1").empty();
                $("#Div1").append($SubListSelect);


            }
            else {

            }
        },
        error: function (r) {
            alert('Error! Please try again.');
            console.log(r);

        }
    });

}

和插件代码：

$(document).ready(function ($) {


        $(function () {
            $("#SubListSelect").chosen();
        });

谢谢

Answer 1

我认为#Div1位于$("#Div1").empty(); $("#Div1").append($SubListSelect); $("#SubListSelect").chosen();，您正在清空，然后重新附加。

在这种情况下，您需要重新初始化它： -

#Div1

更好的选择是仅清空选择并将选项重新附加到选择而不清空$("#SubListSelect").trigger("chosen:updated");。然后打电话： -

$(document).ready(function ($) {

另外，这个

$(function () {

和这个

public static String changeCreditTimeStampMin(String tmStmp, int minutesToAdd) {

    tmStmp = tmStmp.substring(0, tmStmp.length() - 3);
    try {
        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss.SSS");
        java.util.Date parsedDate = dateFormat.parse(tmStmp);
        java.sql.Timestamp timestamp = new java.sql.Timestamp(parsedDate.getTime() + minutesToAdd*60*1000);
        tmStmp = timestamp.toString();
    } catch (ParseException e) {
        e.printStackTrace();
    }catch(Exception e){
        e.printStackTrace();
    }
    return tmStmp;
}

意思相同，后者是短手。因此，您只需要一个。

Answer 2

我的建议：

在我的演示中，我为ajax使用了一个不同的url，我想出了一个可能的HTML。

function GetSubCategories(ID) {
  $.ajax({
    cache: false,
    url: "https://api.github.com/users",
    type: 'GET',
    dataType: "json",
    data: { id: ID },
    success: function (data) {
      if (data.length > 0) {
        var SubListSelect = $('<select id ="SubListSelect" class = "form-control"></select>')
        .append('<option>Select Sub Category</option>');
        $.each(data, function (i, value) {
          SubListSelect.append('<option value=' + value.id + '>' + value.login + '</option>');
        });
        $("#Div1").empty().append(SubListSelect);
        $("#Div1").find(SubListSelect).chosen()
      } else {
      }
    },
    error: function (r) {
      alert('Error! Please try again.');
      console.log(r);

    }
  });
}
$(document).ready(function ($) {
  $("#SubListSelect").chosen();
  $('#btn').on('click', function(e) {
    GetSubCategories('1');
  });
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<!--
The next two lines are the include files for chosen plugin
-->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>


<div id="Div1">
This is the starting div:
</div>
<button id="btn">Click Me To Create New chosen object into DIV</button>

当我动态创建元素时，选择的插件不起作用

2 个答案: