Question

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

Answer 1

我认为您需要删除循环中的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>

Answer 2

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

您在key的开头宣布value和var为$('[name=type]').change，但稍后再宣布它们{{1}所以第一个var key = $(option).text()永远不会得到一个值。
您还尝试从名为main的key获取所选选项的值，但在您的HTML中，您没有具有该名称的选项。
如果您的select中的不使用multiple，那么您可以使用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');

});

我无法获得javascript的价值

2 个答案: