Pug Templates - How to mark option in Dropdown list as selected
<p>I have a Pug template that uses Bootstrap 4 as the 'layout' and receiving data from an Express/Mongoose server.</p>

<p>I am populating a form from MongoDB so the contents can be edited.  I have been looking for ways to make a dropdown-list 'select' an option based on the value from the mongoDB document.</p>

<p>I have seen ways of building the dropdown-list from scratch and setting an option as 'selected', but the form is already generated and has a dropdown-list already in place.  I just need to match the option with the value from the mongoDB document and set the option to display in the list.</p>

<p>The Pug template is as follows:</p>

<pre><code>.row
  .col-sm-6
    .form-group
      label.control-label.requiredField(for='propertyType')
        | Property Type
        span.asteriskField *
      .col-xs-12
        select#propertyType.select.form-control.input-lg(form='addProperty', name='propertyType')
          option(value='0') -- Select --
          option(value='6') Home
          option(value='7') Condo
          option(value='10') Single Family Home
          option(value='11') Town House
          option(value='12') City Apartment
          option(value='13') Villa


script.
  var propertyType = document.getElementById('propertyType');

  for (var i = 0; i &lt; propertyType.options.length; i++) {

    if (propertyType.options[i].value = #{property.typeId}) {
        propertyType.options[i].selected = 'selected';
        propertyType.selectedIndex = i;
        break;
    }

  }
</code></pre>

<p>If I keep the code as listed then the actual option that gets a new value is the first one '-- Select --' which has it's value changed from '0' to '6', which is the value from the MongoDB document.</p>

<p>If I change the javascript to pass the value #{property.TypeId} to the 'selectedIndex' like this:</p>

<pre><code>propertyType.selectedIndex = #{property.typeId};
</code></pre>

<p>Then the value of the index changes and the 'selected' option changes - to '6' but this then selects the 6th option of the options and not the one with the value of '6'.</p>

<p>Drop-downs are the only thing I can't seem to populate so any help would be greatly appreciated.</p>