change event on multiselect does not trigger

问题

Edit: Problem solved!

I have several multiselect fields in flask. When I change the selected items in one, I want to trigger a change in the other ones (right now, I am only trying to change one other field, because I don't know how to change several). However, this does not work at all. When I change the selected items, nothing changes, I don't even get an error message. Is a .change event not the right one to use with multiselect? My multiselect field looks like this: and I am using this multiselect: https://www.jqueryscript.net/form/jQuery-Plugin-For-Multi-Select-Checboxes-multiselect.html I also have the following js in a separate script file:

$(function(){
    $param1_newlist = $('#param1');
    $param1_newlist.multiselect();
    });

My html imports are:

    <script src="{{ url_for('static', filename="js/jquery.multiselect.js")}}"></script>
     <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/jquery.multiselect.css') }}">

and my multiselect form fields are all set up like the following:

    <form action="/get_plot">
    <div style="float: left">
    <br><b>Param1</b><br>
    <select name="param1" multiple="multiple" id="param1" style="width:150px">
        {% for p in param_1_list %}
                {% if p in current_param_1 %}
                        <option selected value="{{ p }}">{{ p }}</option>
                {% else %}
                        <option value="{{ p }}">{{ p }}</option>
                {% endif %}
        {% endfor %}
     </select>
     </div>
     </form>

My ajax request looks like this:

    <script type="text/javascript" charset="utf-8">
    $("#param1").change(function(){
        $.ajax({
            url: '/selectform',
            type: 'POST',
            data: $('#param1').serialize(),
            success: function(selectOptions){
                $("#param2").empty();
                for (var i = 0; i < selectOptions.length; i++){
                    $("#param2").append(
                        $("<option></option>")
                        .attr("value", selectOptions[i][0])
                        .text(selectOptions[i][1])
                    );
                }
            }
        });
    });
</script>

In flask, the code portion to handle the ajax request looks like this:

    @app.route('/selectform', methods=['POST'])
    def updateselect():
         print(request.form)
         choices = ["test1", "test2"]
         response = make_response(json.dumps(choices))
         response.content_type = 'application/jsons'
         return response

来源：https://stackoverflow.com/questions/62775101/change-event-on-multiselect-does-not-trigger

标签

javascript

python

html

ajax

Flask