如何将新添加的 select 选项暴露给 Javascript

Question

I've spent a while on this and can't find an answer that makes sense to me. Not saying there's not 100s of answers out there which would help, I just haven't picked a solution out.

I have a select field within a jinja template, hooked up to a Python / Flask / SQLAlchemy application. If it makes any difference, I'm using Bootstrap 5. I am only just starting to get to grips with Javascript.

The behaviour I'm aiming for is: -

• From a template, click on a link to open up a Bootstrap 5 modal - works fine
• Enter details into the modal form and save the details - works fine
• When I return to the template - the new entry appears as a selectable option - works fine
• I also want the select field to default to the newly added option - not working (the field remains blank)

After investigating, it seems as though the new option, although visible in the select field, isn't yet available to Javascript.

Code for the select field (based on an SQLAlchemy QuerySelect field): -

HTML (Jinja)

# I'm using wtforms so the id of this element is #individual_birth_location
<div class="col-sm-7 w-auto">
    {{ wtf.form_field(form.individual_birth_location, class='form-select w-auto') }}
</div>

Javascript

    <!--The 'btnaddlocation' button is the Save button on the modal-->
    document.getElementById('btnaddlocation').onclick = function() {
    var len = document.getElementById('individual_birth_location').length;      
    if (eventType === 'birth') {
        document.getElementById('individual_birth_location').value = len;
    } else if (eventType === "death") {
        <!-- similar code-->
    }
    }

I've tried setting the value to len-1 (ie the option added immediately prior to the new option) and this works fine.

But when I add a new record via the modal, it seems the template doesn't "know" about the new record yet. So the select field remains blank (even though the newly added option is clearly in the list).

What am I missing?

Thanks.

Answer 1

I am not sure about python but

   <!--The 'btnaddlocation' button is the Save button on the modal-->
    document.getElementById('btnaddlocation').onclick = function() {
    var len = document.getElementById('individual_birth_location').length;      
     if (eventType = 'birth') { 
         document.getElementById('individual_birth_location').value = len;
     } else if (eventType = "death") {
         <!-- similar code-->
    }
    }

The comparison that you are trying(assuming) is not comparing but it assigns. So javascript would look like this if you want to check if eventType is equal to 'birth':

document.getElementById('btnaddlocation').onclick = function() {
var len = document.getElementById('individual_birth_location').length;      
if (eventType === 'birth') { 
    document.getElementById('individual_birth_location').value = len;
} else if (eventType === "death") {
    <!-- similar code-->
}
}

Source for comparison w3schools