我无法获得javascript的价值

时间:2017-09-29 05:33:20

标签: javascript jquery python html django

我无法获得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>

我想得到我和我价值变量console.log(key);&amp; console.log(value);与// B,但现在未定义为shown.console.log(key);&amp;带有// A的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 :(得分: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>

答案 1 :(得分:0)

您的代码似乎存在一些问题:

  1. 您在key的开头宣布valuevar$('[name=type]').change,但稍后再宣布它们{{1}所以第一个var key = $(option).text()永远不会得到一个值。

  2. 您还尝试从名为main的key获取所选选项的值,但在您的HTML中,您没有具有该名称的选项。

  3. 如果您的select中的使用multiple,那么您可以使用select获取所选的选择值,没有理由使用key = $('select[name="main"]').val();

  4. 我已经更改了您的代码并在下面制作了一个工作示例。

    .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');
    
    });