使用Ajax jQuery的动态选择选项不起作用

Question

I am using Ajax jQuery to get select data with id "pSelId" and "pVim" from my Flask server (please see the HTML code below). This is working fine independently.

Now I have to take decision based on selected option in "pSelId" and return option data in select field "pVim", for which I have to get the value of "#p_name" on my Flask server from the selected value in select field "pSelId" to take this decision. Currently I am assigning static value for p_name='p15' on server side.

I have no idea how to send the value of selected option in

Server side code:

@app.route('/listpopvim', methods=['POST','GET'])
def listpopvim():
    #p_name=request.form['pName'];
    p_name='p15'
    p_dict1 = []
    for p in load_p:
       p_dict2={
         'pop': p['fq_name'][1]
        }
       #pop_dict1.append(pop_dict2)

    return json.dumps(p_dict1)

HTML / jQuery:

<div class="row">
     <div class="col-xs-4">
     <h6> P Name </h6>
     <select id="pSelId" name="pName"  class="form-control"> </option> </select>
     </div>

     <div class="col-xs-4">
     <h6> VIM </h6>
     <select id="pVim" name="pVim" class="form-control"> </select>
     </div>
</div>


<script>
getdata()
function getdata(){
              $.ajax({
                        url : '/listpv',
                        type : 'POST',
                        success: function(data){
                                var pretrun = JSON.parse(data);
                                console.log(data)
$( "select" ).change( displayVals );
        var options = "";
         for (var i = 0; i < pretrun.length; i++) {
           if (pretrun[i].pop){
                options += "<option>" + pretrun[i].pop + "</option>";
                      }
                } 
        $("#pSelId").html(options);
                        },
                        error: function(error){
                                console.log(error);
                        }
                });

}

function displayVals() {
        var singleValues = $( "#pSelId" ).val();
        console.log(singleValues) 
}
$( "#pSelId" ).change( displayVals );
displayVals();

</script>

Answer 1

I think all that you're missing here is the data field in your post request. You'll have to mess around a little bit with what you actually want in the data field because I'm not entirely sure that I understood exactly what you're looking for there, but this site should help with that.

Python:

@app.route('/listpopvim', methods=['POST','GET'])
def listpopvim():
p_name=request.form['pName'];
p_dict1 = []
for p in load_p:
    p_dict2={
        'pop': p['fq_name'][1]
    }
   #pop_dict1.append(pop_dict2)

return json.dumps(p_dict1)

HTML:

<div class="row">
 <div class="col-xs-4">
 <h6> P Name </h6>
 <select id="pSelId" name="pName"  class="form-control"> </option> </select>
 </div>

 <div class="col-xs-4">
 <h6> VIM </h6>
 <select id="pVim" name="pVim" class="form-control"> </select>
 </div>
</div>

JS:

<script>
getdata()
function getdata(){
    $.ajax({
        url : '/listpv',
        type : 'POST',
        data : {pName : $("pSelId").val()},
        success: function(data){
            var pretrun = JSON.parse(data);
            console.log(data);
            $( "select" ).change( displayVals );
            var options = "";
            for (var i = 0; i < pretrun.length; i++) {
                if (pretrun[i].pop){
                    options += "<option>" + pretrun[i].pop + "</option>";
                }
            } 
            $("#pSelId").html(options);
        },
        error: function(error){
            console.log(error);
        }
    });
}
function displayVals() {
    var singleValues = $( "#pSelId" ).val();
    console.log(singleValues) 
}
$( "#pSelId" ).change( displayVals );
displayVals();

</script>

Answer 2

Thank you for the reply. I did some modifications and was able to send data to server however i am not able to retrieve using request.form['pName']; however i can see the data using below code ss=request.form print ss

another problem is this data is an ImmutableMultiDict, not sure why. this is the output of print ss on my server console:

ImmutableMultiDict([('pName', u'pop15')])

Here is the modified code:

i get data for select1 from this function and result of which will be fwd to another function name displayVals on change event. second function will then populates my select2 field.

Function to get data for Select1

                     function getpop(){
                          $.ajax({
                                url : '/listpopvim',
                                type : 'GET',
                                success: function(data){
                                     var pop = JSON.parse(data);
                                     console.log(data)
                                    var options = "";
                                    for (var i = 0; i < pop.length; i++) {
                                            if (pop[i].pop){
                                                    options += "<option>" + pop[i].pop + "</option>";
                                                    }
                                            } 
                                            $("#popSelId").html(options);
                                    $( "select" ).change( displayVals );
                                  },
                                  error: function(error){
                                        console.log(error);
                                    }
                            });

            }

Function to get data for Select2

                    displayVals();
                    function displayVals() {
                            $.ajax({
                                    url: "/listpopvim",
                                    data: {pName: $( "#popSelId" ).val()},
                                    ContentType : 'application/json',
                                    dataType: "json",
                                    //data: JSON.stringify(singleValues),
                                    type:"POST",
                                    success : function(response) {
                                            //console.log(response)
                                            },
                                    error: function() {
                                            alert('Error occured');
                                            }
                                    });
                    }