How to Set HTML Element Value to That of User Input

Question

How can I set the option value of a drop-down list to the option selected by the user. I believe I need to use a script but I am unsure as to the best practice. The options are populated via JSON response. This functionality is needed for form submission.

    <div class="select">
        <select name="selectcompanies" id="selectcompanies">
            <option value="">Company</option>
            {% for company in companies %}
                <option value="" name="selected_company" id="selected_company">{{ company.name }}</option>}
            {% endfor %}
        </select>
    </div>

Answer 1

To make a select option as "selected" we can use the "selected" html attribute.

While looping the json value,

1. check the json value with the current option value
2. if they match, set the selected attribute to that option value.

It will make that option appear as selected.

You can refer to https://www.w3schools.com/tags/att_option_selected.asp for more details.