我无法获得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>
答案 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)
您的代码似乎存在一些问题:
您在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');
});