Q:

I cannot get javascript's value

I cannot get javascript's value.I wrote in index.html 
<body>
　  <form method="post" action="">
    <select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:600px;">
    {% for i in json_data.items.values %}
            <option value="{{forloop.counter}}">{{ i }}</option>
    {% endfor %}
    </select>

    {% for key, values in preprocessed %}
    <select name="type" id=type{{forloop.counter}}>
    {% for counter, value in values %}
        <option value="{{forloop.counter}}">{{ value }}</option>
    {% endfor %}
    </select>
    {% endfor %}
    </form>

  <script type="text/javascript">

        $(document).ready(function () {
            $('#mainDD').on('change', function() {
              var thisType = "type" + $(this).val();
              for(i=1; i<6; i++) {
                  var thisId = "type" + i;
                  if(thisType !== thisId) {
                    $("#"+thisId).hide();
                  }
                  else {
                    $("#"+thisId).show();
                  }
              }

            }).trigger('change');

        });

  </script>

     <form id="postform" action="http://localhost:8000/app/test_view" method="POST">
      {% csrf_token %}
      <input type="submit" value="SEND">
     </form>
     <script type="text/javascript">
        $('[name=type]').change(function() {
    　　var key;
        var value;
        $('select[name="main"] option:selected').each(function(index, option) {
            var key = $(option).text();
            console.log(key); //A
        });

        $('select[name="type"] option:selected').each(function(index, option) {
            var value = $(option).text();
            console.log(value); //A
        });
        console.log(key); //B
        console.log(value); //B
          document.querySelector("input[type=submit]").onclick = e => {
           const test = window.open(`test_view?${key}=${value}`, "_blank");
          }
     });
     </script>
  </body>

I wanna get i& value variables console.log(key); & console.log(value); with //B,but now undefined is shown.console.log(key); & console.log(value); with //A is shown ideal values I really cannot understand why I can not get these values in last console.log.How should I fix this? What should I write it?
New javascript codes is
<script type="text/javascript">
     $('[name=type]').change(function() {
    　　var key;
        var value;
        $('select[name="main"] option:selected').each(function(index, option) {
            key = $(option).text();
        });

        $('select[name="type"] option:selected').each(function(index, option) {
            value = $(option).text();
        });
        console.log(key);
        console.log(value);
          document.querySelector("input[type=submit]").onclick = e => {
           const test = window.open(`test_view?${key}=${value}`, "_blank");
          }
     });
     $(document).ready(function () {
            $('#mainDD').on('change', function() {
              var thisType = "type" + $(this).val();
              for(i=1; i<6; i++) {
                  var thisId = "type" + i;
                  if(thisType !== thisId) {
                    $("#"+thisId).hide();
                  }
                  else {
                    $("#"+thisId).show();
                  }
              }

            }).trigger('change');

        });

     </script>

A:

There seem to be a few problems with your code:

You have key and value declared as a var in the start of $('[name=type]').change but then you declare them again just a bit later var key = $(option).text() so the first key will never get a value.
You also try to get the value of the selected option from a select with the name main, but in your HTML you don't have one with that name.
Also if your NOT using multiple in your select then you can get the selected value of a select by using key = $('select[name="main"]').val();, no reason to use .each()

I've changed your code and made a working example below.

$('[name=type]').change(function() {　　
  var key;
  var value;
  $('select[name="main"] option:selected').each(function(index, option) {
    key = $(option).text();
    console.log(key + " (A) "); //A
  });

  $('select[name="type"] option:selected').each(function(index, option) {
    value = $(option).text();
    console.log(value + " (A) "); //A
  });
  console.log(key + " (B) "); //B
  console.log(value + " (B) "); //B
  document.querySelector("input[type=submit]").onclick = e => {
    const test = window.open(`test_view?${key}=${value}`, "_blank");
  }
});
$(document).ready(function() {
  $('#mainDD').on('change', function() {
    var thisType = "type" + $(this).val();
    for (i = 1; i < 6; i++) {
      var thisId = "type" + i;
      if (thisType !== thisId) {
        $("#" + thisId).hide();
      } else {
        $("#" + thisId).show();
      }
    }

  }).trigger('change');

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mainDD" name="main" data-placeholder="Choose" class="chzn-select" style="width:600px;">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
    </select>

<select name="type" id=type1>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>

<form id="postform" action="http://localhost:8000/app/test_view" method="POST">
  <input type="submit" value="SEND">
</form>

