title: Get selected option from dynamic dependent dropdown list - using Flask (Python)
body: <p>I'm trying to retrieve the selected option on a dynamic dependent dropdown list, but I only get <code>None</code> using <code>request.form.get</code>. My example generates a dropdown list in the image below:</p>
  <p><a href="https://i.stack.imgur.com/Yvoc5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yvoc5.png" alt="enter image description here" /></a></p>
  <p>The full code to generate the dropdown list is below, and it is based on an answer to <a href="https://stackoverflow.com/questions/25978879/how-to-create-chained-selectfield-in-flask-without-refreshing-the-page">this question</a>.</p>
  <pre><code>from flask import Flask, render_template_string, request, redirect
  
  app = Flask(__name__)
  
  @app.route('/', methods=[&quot;GET&quot;, &quot;POST&quot;])
  def index():
  
      systems = {
          'PlayStation': {'Spyro': ['1', '2', '3'], 'Crash': ['4', '5', '6'], 'Ico': ['7', '8']},
          'N64': {'Mario Kart': ['Mario', 'Luigi'], 'Superman': ['12', '13', '14']}
      }
      
      if request.method == &quot;POST&quot;:
  
          systemGet = request.form.get(&quot;system&quot;)
          gameGet = request.form.get(&quot;game&quot;)
          charactersGet = request.form.get(&quot;characters&quot;)
          
          print(systemGet)
          print(gameGet)
          print(charactersGet)
  
          return redirect('temp.html')
  
      return render_template_string(template, systems=systems)
      
      
  
  template = &quot;&quot;&quot;
  &lt;!doctype html&gt;
  &lt;form method=&quot;POST&quot;&gt;
      &lt;select id=&quot;system&quot;&gt;
          &lt;option&gt;&lt;/option&gt;
      &lt;/select&gt;
      &lt;select id=&quot;game&quot;&gt;&lt;/select&gt;
      &lt;select id=&quot;characters&quot;&gt;&lt;/select&gt;
      &lt;button type=&quot;submit&quot;&gt;Play&lt;/button&gt;
  &lt;/form&gt;
  &lt;script src=&quot;//code.jquery.com/jquery-2.1.1.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
      &quot;use strict&quot;;
  
      var systems = {{ systems|tojson }};
  
      var form = $('form');
      var system = $('select#system');
      var game = $('select#game');
      var characters = $('select#characters');
  
      for (var key in systems) {
          system.append($('&lt;option/&gt;', {'value': key, 'text': key}));
      }
  
      system.change(function(ev) {
          game.empty();
          game.append($('&lt;option/&gt;'));
  
          var games = systems[system.val()];
  
          for (var i in games) {
              game.append($('&lt;option/&gt;', {'value': i, 'text': i}));
          }
      });
      
      game.change(function(evV) {
          characters.empty();
          characters.append($('&lt;option/&gt;'));
  
          var games = systems[system.val()][game.val()];
  
          for (var i in games) {
              characters.append($('&lt;option/&gt;', {'value': games[i], 'text': games[i]}));
          }
      });
  
  &lt;/script&gt;
  &quot;&quot;&quot;
  
  if __name__ == '__main__':
      app.run()
  </code></pre>
  <p><strong>Edit</strong>:
  Including the <code>name</code> attribute, as proposed by @vremes, all works. The solution becomes:</p>
  <pre><code>from flask import Flask, render_template_string, request, redirect
  
  app = Flask(__name__)
  
  @app.route('/', methods=[&quot;GET&quot;, &quot;POST&quot;])
  def index():
  
      systems = {
          'PlayStation': {'Spyro': ['1', '2', '3'], 'Crash': ['4', '5', '6'], 'Ico': ['7', '8']},
          'N64': {'Mario Kart': ['Mario', 'Luigi'], 'Superman': ['12', '13', '14']}
      }
      
      if request.method == &quot;POST&quot;:
  
          systemGet = request.form.get(&quot;system&quot;)
          gameGet = request.form.get(&quot;game&quot;)
          charactersGet = request.form.get(&quot;characters&quot;)
          
          print(systemGet)
          print(gameGet)
          print(charactersGet)
  
          return redirect('temp.html')
  
      return render_template_string(template, systems=systems)
      
      
  
  template = &quot;&quot;&quot;
  &lt;!doctype html&gt;
  &lt;form method=&quot;POST&quot;&gt;
      &lt;select id=&quot;system&quot; name=&quot;system&quot;&gt;
      &lt;/select&gt;
      
      &lt;select id=&quot;game&quot; name=&quot;game&quot;&gt;
      &lt;/select&gt;
      
      &lt;select id=&quot;characters&quot; name=&quot;characters&quot;&gt;
      &lt;/select&gt;
          
      &lt;button type=&quot;submit&quot;&gt;Play&lt;/button&gt;
  &lt;/form&gt;
  &lt;script src=&quot;//code.jquery.com/jquery-2.1.1.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
      &quot;use strict&quot;;
  
      var systems = {{ systems|tojson }};
  
      var form = $('form');
      var system = $('select#system');
      var game = $('select#game');
      var characters = $('select#characters');
  
      for (var key in systems) {
          system.append($('&lt;option/&gt;', {'value': key, 'text': key}));
      }
  
      system.change(function(ev) {
          game.empty();
          game.append($('&lt;option/&gt;'));
  
          var games = systems[system.val()];
  
          for (var i in games) {
              game.append($('&lt;option/&gt;', {'value': i, 'text': i}));
          }
      });
      
      game.change(function(evV) {
          characters.empty();
          characters.append($('&lt;option/&gt;'));
  
          var games = systems[system.val()][game.val()];
  
          for (var i in games) {
              characters.append($('&lt;option/&gt;', {'value': games[i], 'text': games[i]}));
          }
      });
  
  &lt;/script&gt;
  &quot;&quot;&quot;
  
  if __name__ == '__main__':
      app.run()
  </code></pre>