Я не могу получить значение 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>
Кажется, что есть несколько проблем с вашим кодом:
У вас есть key
и value
объявленное как var
в начале $('[name=type]').change
но затем вы объявляете их снова чуть позже var key = $(option).text()
поэтому первый key
никогда не получит значение.
Вы также пытаетесь получить значение выбранного параметра из select
с именем main, но в вашем HTML у вас нет имени с этим именем.
Также, если ваш 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>
Я думаю, вам нужно удалить ключевое слово 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>
key
, но не могу получитьvalue
Как я могу это исправить?var
изvar value = $(option).text();