Question

先生，当我使用select2插件时，我的ajax没有加载。当我删除它时，它工作正常。模糊事件正在运行。但我希望能够在下拉列表中进行搜索，而ajax无法正常工作这部分不起作用

$("#bank_id").focus();

因此，由于上述脚本无法正常工作，因此以下代码中的模糊事件无法正常工作。

这是脚本和html

<div class="col-md-6">
        <div class="form-group">
          <label>Bank<span><font color="red"></font></span></label>
            <select class="form-control select2" name="bank_id" id="bank_id">
          <c:choose>  
            <c:when test="${bankDetailsEdit.bank_id != 0}">
                <option value="${bankDetailsEdit.bank_id }" >${bankDetailsEdit.bankName }</option>
            </c:when>   
            <c:when test="${bankDetailsEdit.bank_id == 0}">
                <option disabled selected>Select Bank</option>
            </c:when>
          </c:choose>    
                <c:forEach var="bank" items="${bankMasterDetails}">
                    <option value="${bank.bank_id}">${bank.bank_name}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
          <label>Bank Branch Name<span><font color="red"> </font></span></label>
            <select class="form-control select2" name="bankBranchId" id="op1" >
                <option value="${bankDetailsEdit.bankBranchId }" >${bankDetailsEdit.bankBranchName }</option>
                <c:forEach begin="0" end="100" varStatus="loop">
                    <option></option>
                </c:forEach>
            </select>
        </div>
    </div>
    <script>
    $('.select2').select2();
    $(document).ready(function(){ /* PREPARE THE SCRIPT */
        $("#bank_id").focus();
        $("#bank_id").on('blur change',function(){ /* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */

          var bank_id = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */
          var dataString={'bank_id':bank_id}; /* STORE THAT TO A DATA STRING */

          $.ajax({
                type: "GET",

                url: "${pageContext.request.contextPath}/broker/bankBranchDetails",
                data : ({
                    'bank_id':bank_id
                }),

                success: function (bankList) {
                    $('#op1').empty();
                    var opt = '<option disabled selected>Select Branch</option>';
                    for (var i = 0; i < bankList.length; i++) {
                        $('#op1').append(opt);
                        opt = new Option(bankList[i].bank_branch_name,bankList[i].bank_branch_id);

                    }

                   },
                   error: function (request, error) {
                      alert("Unable to fetch bank details");
                   }
              });  

        });

        $("#op1").change(function(){ /* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */

              var branch_id = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */
              var dataString={'branch_id':branch_id}; /* STORE THAT TO A DATA STRING */

              $.ajax({
                    type: "GET",

                    url: "${pageContext.request.contextPath}/broker/branchIfscDetails",
                    data : ({
                        'branch_id':branch_id
                    }),

                    success: function (data) {
                        var ifsc = data;
                        document.getElementById("ifsc").value=ifsc;

                       },
                       error: function (request, error) {
                          alert("Unable to fetch bank details");
                       }
                  });  

            });

      });
    </script>

Answer 1

在此页面上：https://select2.org/programmatic-control/events：

Select2具有一个内部事件系统，该系统独立于 DOM事件系统，允许适配器相互通信。

您必须使用插件事件处理机制，因此需要更改jQuery on函数的第一个参数。

来自$("#bank_id").on('blur change',function(){

到$("#bank_id").on('select2:select',function(){

很遗憾，$("#bank_id").focus();无法使用，因为它没有在可用的select2事件中列出。

您是第一个事件侦听器中的success回调函数，它试图为第二个选择框生成options元素也将不起作用，因为select2具有添加{{1}的不同方法}通过此页面中列出的AJAX动态进行：https://select2.org/data-sources/ajax

Answer 2

您需要使用$('#bank_id').select2('open');而不是$("#bank_id").focus();来在页面加载时打开库选择。

您可以检查他们的documentation。

select2不允许其他脚本运行

2 个答案: