Question

大家下午好！

到目前为止，我已经尝试了很多方法，但是没有办法解决！我有一个JS代码，并且我正在使用bootstrap-select，我打算在JS / Jquery中将“全选/取消全选”按钮作为多选项。我有一个方法（selectOrDeselectAll（））进行测试，如果所有选项都被选中，他会取消选择它，反之亦然。

但是无论我做什么，该方法都在一个被两次调用的更改事件中！

geraCertificado.js

$("#selYear").on("changed.bs.select", function(e, clickedIndex, newValue, oldValue)
{
    // $(this).off("changed.bs.select");
    console.log("c");
    var selectedOption = $(this).find('option').eq(clickedIndex).text();
    if(selectedOption == 'Todos os anos') selectOrDeselectAll();
    else console.log(selectedOption);
    // $(this).on("changed.bs.select", selectOrDeselectAll);
});

function selectOrDeselectAll()
{
    alert("caiu");
    var nOptionsSelected = 1;

    if($("#selYear").val() != null) var nOptionsSelected = $("#selYear").val().length+1;
    var nOptionsTotal = $("#selYear option").size();

    console.log("selecionadas " + nOptionsSelected);
    console.log("total " + nOptionsTotal);
    if (nOptionsSelected == nOptionsTotal)
    {
        $("#selYear").selectpicker('deselectAll');
    }
    else
    {
        $("#selYear").selectpicker('selectAll');
    }
};

geraCertificado.ejs

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gerar Certificado</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>

    <link rel="stylesheet" href="/CPPG/stylesheets/geraCertificado.css">

    <script src="/CPPG/js/geraCertificado.js"></script>
</head>

<body>
<h4>Professor:</h4>
<form action="/CPPG/pdf" method="POST">
                                <div>
<select class="selectpicker" id="selTeacher" data-live-search="true" title="Selecione um discente..">
<% for (teacher of teachers){%>
<option data-tokens= "<%= teacher %> "> <%= teacher %></option>
                                        <% } %>
</select>
</div>
<br>
        <div id="selectMinYear">
        <h4>Ano referente ao início do projeto:</h4>
        <select class="selectpicker" id="selYear" data-live-search="true" title="Primeiro, selecione o professor" multiple>
        </select>
        </div>

<button type="button" class="btn btn-default navbar-btn">Gerar</button> <h4>Professor:</h4>
<form action="/CPPG/pdf" method="POST">
    <div>
        <select class="selectpicker" id="selTeacher" data-live-search="true" title="Selecione um discente..">
            <% for (teacher of teachers){%>
                <option data-tokens= "<%= teacher %> "> <%= teacher %></option>
            <% } %>
        </select>
    </div>
    <br>
    <div id="selectMinYear">
        <h4>Ano referente ao início do projeto:</h4>
        <select class="selectpicker" id="selYear" data-live-search="true" title="Primeiro, selecione o professor" multiple>
        </select>
    </div>

    <button type="button" class="btn btn-default navbar-btn">Gerar</button>

在数据库中运行查询后，使用JQuery填充问题，因为我在geraCertificado.js中创建了一个函数

$("#selTeacher").on('change', function()
{
    var data = {};
    data.teacherName = $(this).val();

    $.ajax(
    {
        type: 'POST',
        data: JSON.stringify(data),
        contentType: 'application/json',
        url: '/CPPG/gerarCertificado',
        success: function(data)
        {
            var min = data[0];
            var max = data[1];

            if(min)
            {
                $('#selYear').empty();
                $("#selYear").append("<option data-tokens= 'Todos os anos' id='allOptions'>Todos os anos</option>");
                for(var i = min; i<=max; i++)
                {
                    $("#selYear").append("<option data-tokens= '" + i + "'> " + i + " </option>");  
                }
                $('.selectpicker').selectpicker('refresh');
                $('#selectMinYear').show();
            }
        }
    });
});

on（“ changed.bs.select”）被两次调用

0 个答案: