I am updating a select element in a modal with JQuery. If I do a console.log, the element exists.
If I inspect element, it doesn't exist.
What could be causing the problem? The console.log is occurring after the JQuery has run which means it is working properly. If you don't do it in a modal, the code works fine, but if you do it in a modal, it doesn't append.
What could bring about this behavior?
Here is a sample code that works just fine but doesn't work in my computer.
var options = {
'option1': {'display': 'Series A', 'optionsB': {'name': 'John', 'city': 'Doe'}},
'option2': {'display': 'Series B', 'optionsB': {'name': 'Jane', 'city': 'Maria'}},
}
function updateOptions(){
/* var options = $('#selectoptions').data('datasets') */;
for (const opt1 in options) {
$('#option1').append($('<option>', {
value: opt1,
text: options[opt1]['display']
}))
}
$('#option1').on('click', function(){
var option1 = $('#option1').val();
for (const opt2 in options[option1]['optionsB']) {
$('#option2').append($('<option>', {
value: opt2,
text: options[option1]['optionsB'][opt2]
}))
}
})
}
$(function(){
updateOptions();
});<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<button type="button" id="examPle" data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn btn-primary">Get Example</button>
<div id="exampleModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Example Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form class="form" id="exampleform" name="exaple" method="post" required>
<div id="selectoptions">
<select id="option1" class="form-select form-select-sm mb-1">
<option value="...">Select Option 1</option>
</select>
<select id="option2" class="form-select form-select-sm mb-1">
<option value="...">Select Option 2</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>This is an edit to the question: The code above shows a minimal version. The whole code is a django application. I will edit the above html code to be
<div class="modal-body">
<!-- {% csrf_token %} -->
<p>Filter Collection</p>
<div id="navpanel" data-datasets="{{ datasets }}">
<select id="option1" class="form-select form-select-sm mb-1">
<option value="...">Select Map Type</option>
</select>
</div>
</div>
The python views.py file has the following:
from .controls import datasets
import json
def maps(request):
context = {
'datasets': json.dumps(datasets),
}
return render(request, 'example.html', context)
The .controls sample is as follows
datasets = {
'series1': {
'display': 'This first Text',
'options': {
'series1A': {
'display' : 'This text for 1 A'
},
'series1B': {
'display' : 'This text for 1 B'
},
},
},
'series 2': {
'display': 'This text',
'options': {
'series2A': {
'display': 'This next text of 2 A',
},
'series2B': {
'display': 'This next text of 2 B'
},
},
},
}
And the javascript, you remove the var option variable and you changes it as follows:
function updateOptions(){
var options = $('#selectoptions').data('datasets');
for (const opt1 in options) {
$('#option1').append($('<option>', {
value: opt1,
text: options[opt1]['display']
}))
}
$('#option1').on('click', function(){
var option1 = $('#option1').val();
for (const opt2 in options[option1]['optionsB']) {
$('#option2').append($('<option>', {
value: opt2,
text: options[option1]['optionsB'][opt2]['display']
}))
}
})
}
$(function(){
updateOptions();
});
