title: Dynamic select option using Ajax jQuery not working
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>I have no idea how to send the value of selected option in </p>
  
  <p>Server side code:</p>
  
  <pre><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)
  </code></pre>
  
  <p>HTML / jQuery:</p>
  
  <pre><code>&lt;div class="row"&gt;
       &lt;div class="col-xs-4"&gt;
       &lt;h6&gt; P Name &lt;/h6&gt;
       &lt;select id="pSelId" name="pName"  class="form-control"&gt; &lt;/option&gt; &lt;/select&gt;
       &lt;/div&gt;
  
       &lt;div class="col-xs-4"&gt;
       &lt;h6&gt; VIM &lt;/h6&gt;
       &lt;select id="pVim" name="pVim" class="form-control"&gt; &lt;/select&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
  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 &lt; pretrun.length; i++) {
             if (pretrun[i].pop){
                  options += "&lt;option&gt;" + pretrun[i].pop + "&lt;/option&gt;";
                        }
                  } 
          $("#pSelId").html(options);
                          },
                          error: function(error){
                                  console.log(error);
                          }
                  });
  
  }
  
  function displayVals() {
          var singleValues = $( "#pSelId" ).val();
          console.log(singleValues) 
  }
  $( "#pSelId" ).change( displayVals );
  displayVals();
  
  &lt;/script&gt;
  </code></pre>