表单中的下拉菜单显示最后一个选项，而不是所选的选项

Question

我有一个selected_tag下拉列表，其选择的值在 {{default_tag}}中 这是正确的价值。 我有selected_sub_tag下拉列表，其值取决于selected_sub所选选项。此列表选择的值从路线返回并存储在 {{desfault_sub_tag}}。这是正确的值。 但是，子下拉列表显示的是最后一个列表值，而不是选定的值 一 由条件选择的签名。以下是sub_tag列表代码：

    <li class="tab " id="tab-3"><span class="tab-title">
        <label for="selected_sub_tag">קטגוריה</label>               
        <select class="form-control" name="selected_sub_tag" id="selected_sub_tag" onClick="saveSt(this);">
            {% for sub_tag in sub_tags if (default_tag.is_parent_of(sub_tag)) %}
                    {% if sub_tag == default_sub_tag %}
                        <option value="{{ default_tag.id }}" selected>SELECTED: {{sub_tag.title}}{{sub_tag.id}}</option>
                    {% else %}
                        <option value="{{ default_tag.id }}">NOT: {{sub_tag.title}}{{sub_tag.id}}</option>
                    {% endif %}
            {% endfor %}  <!-- sub_tags of tag -->
        </select>   
    </li>

由于JavaScript SeveSt函数，我无法在选项值中放置sub_tag：

<!--  FROM https://codepen.io/bahiirwa/pen/OjNYZb  -->
<script>
//Reference: https://jsfiddle.net/fwv18zo1/
var $selected_tag = $("#selected_tag"),
  $selected_sub_tag = $("#selected_sub_tag"),
  $options = $selected_sub_tag.find("option");

$selected_tag.on("change", function () {
    $selected_sub_tag.html($options.filter('[value="' + this.value + '"]'));
 }).trigger("change");
</script>


<script>
// FROM  http://jsfiddle.net/6dkun/1/   
function saveSt(element) {
    var text = element.options[element.selectedIndex].text;
    document.getElementById("save_st").innerHTML = text;
    document.getElementById("save_st").value = text;
    
    console.log("IN saveSt");
    console.log(document.getElementById("save_st").value);
}
</script>