Pug Templates - How to mark option in Dropdown list as selected

Question

I have a Pug template that uses Bootstrap 4 as the 'layout' and receiving data from an Express/Mongoose server.

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.

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.

The Pug template is as follows:

.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 < propertyType.options.length; i++) {

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

  }

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.

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

propertyType.selectedIndex = #{property.typeId};

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'.

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

Answer 1

If you just need to show an option pre-selected, then I don't think you need to use javascript for this. You can try this:

.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', selected= true) -- Select --
          option(value='6', selected= property.id == 6) Home
          option(value='7', selected= property.id == 7) Condo
          option(value='10', selected= property.id == 10) Single Family Home
          option(value='11', selected= property.id == 11) Town House
          option(value='12', selected= property.id == 12) City Apartment
          option(value='13', selected= property.id == 13) Villa

Assuming this dropdown shows the values corresponding to property.id, it will mark the selected attribute as true for the option whose value matches the value in property.id. Otherwise, first option will be shown selected by default.