Я пытаюсь получить значение из переменной. console.log ($ ('# id_prova'). val ()) отлично работает при проверке элемента, console.log (proofIdQuestao), который является частью app.js, не работает. Я хочу сделать один выпадающий список зависимым от другого. Вопросы зависят от idProva.
app.js
let urlQuestoes = $('#myForm').data('urlquestoes');
var provaIdQuestao = $('#id_prova').val()
console.log($('#id_prova').val())
console.log(provaIdQuestao);
console.log(urlQuestoes);
$('#questaoSelect').change(function() {
let urlQuestoes = $('#myForm').data('urlquestoes');
let questaoIdQuestao = $(this).val();
console.log(questaoIdQuestao);
$.ajax({
url: urlQuestoes,
data: {
questao: provaIdQuestao
},
success: function(response) {
$('#provaSelect').html(response);
}
})
});
});
base.html
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
</script></head>
index.html
<form action='/pesquisa' id="myForm" method="GET" data-urlquestoes="{% url 'questoes_choices_ajax' %}" data-urlcategorias="{% url 'categorias_choices_ajax' %}">
{% csrf_token %}
<div class="card acik-renk-form">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="provaSelect">Provas</label>
{% render_field form.prova title="Provas" class="form-control" %}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="questaoSelect">Questões</label>
<select class="form-control" name='questao' id="questaoSelect">
<option value="">---------</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="categoriaSelect">Categoria</label>
<select class="form-control" name='categoria' id="categoria">
<option value="">---------</option>
{% for categoria in categorias %}
<option value={{categoria.idCategoria}}>{{categoria.nomeCategoria}}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="form-group">
<input placeholder="Termo" type="text" name="q" class="form-control">
</div>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-block btn-md btn-primary pl-6 pr-6">Pesquisar questões</button>
</div>
</div>
</div>
</div>
</form>