Я не могу получить значение JavaScript

-2

Я не могу получить значение javascript. Я написал в 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>

Я хочу получить переменные я & value console.log(key); & console.log(value); с //B, но теперь shown.console.log(key); undefined.console.log shown.console.log(key); & console.log(value); с//А показаны идеальные значения. Я действительно не могу понять, почему я не могу получить эти значения в последнем console.log. Как я должен это исправить? Что мне написать?

Новые коды javascript

<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>

2 ответа

0
Лучший ответ

Кажется, что есть несколько проблем с вашим кодом:

  1. У вас есть key и value объявленное как var в начале $('[name=type]').change но затем вы объявляете их снова чуть позже var key = $(option).text() поэтому первый key никогда не получит значение.

  2. Вы также пытаетесь получить значение выбранного параметра из select с именем main, но в вашем HTML у вас нет имени с этим именем.

  3. Также, если ваш NOT использует multiple в вашем select вы можете получить выбранное значение select, используя key = $('select[name="main"]').val(); , нет оснований для использования .each()

Я изменил ваш код и сделал рабочий пример ниже.

$('[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>
  • 0
    спасибо, я могу получить значение key , но не могу получить value Как я могу это исправить?
  • 0
    Вы удалили var из var value = $(option).text();
Показать ещё 6 комментариев
0

Я думаю, вам нужно удалить ключевое слово var внутри циклов. Поскольку вы переопределили ключ, переменные значения внутри цикла снова. Вы можете попробовать этот код.

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

    $('select[name="type"] option:selected').each(function(index, option) {
        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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню