Second <Select> is not showing on browser

June 27, 2022

I’m having issues with my last row not showing at all when I compile the program. I tried many things but there seems to ben an issue with the Select tag because what ever I try to add after the first Select row doesn’t show up.

What am I missing?

Here is my code:

  <!DOCTYPE html>
  <html lang="en">

  <head>
      <link rel="stylesheet" href="~/css/OpenStore.css" asp-append-version="true" />
  </head>

      <p align="center" style="color:red">
          Open Store
      </p>

      <div class="OpenStore">
          <form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype = "multipart/form-data">

              <div class="row">
                  <div class="form-group form-group-sm col-sm-6 col-md-13">
                      <div class="row col-md-13">
                          <label class="col-form-label col-md-6">Store # :</label>
                          <div class="col-sm-3">
                              <input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
                          </div>
                      </div>
                  </div>
              </div>

              <div class="row">
                  <div class="form-group form-group-sm col-sm-6 col-md-13">
                      <div class="row">
                          <label class="col-form-label col-md-6">Store Name :</label>
                          <div class="col-sm-3">
                              <input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
                          </div>
                      </div>
                  </div>
              </div>

              <div class="row">
                  <div class="form-group form-group-sm col-sm-6 col-md-13">
                      <div class="row">
                          <label class="col-form-label col-md-6">Language :</label>
                          <div class="col-sm-3">
                              <select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"/>
                              <datalist id="Languages">
                                  <option data-value="English">English</option>
                                  <option data-value="Fr">French</option>
                              </datalist>
                          </div>
                      </div>
                  </div>
              </div>

              <div class="row">
                  <div class="form-group form-group-sm col-sm-6 col-md-13">
                      <div class="row">
                          <label class="col-form-label col-md-6">Group :</label>
                          <div class="col-sm-3">
                              <select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"/>
                              <datalist id="Groups">
                                  <option data-value="2">>Laura</option>
                                  <option data-value="3">Melanie Lyne</option>
                              </datalist>
                          </div>
                      </div>
                  </div>
              </div>

          </form>
      </div>
  </html>

Here is what it looks like in chrome:

html render

>Solution :

The list attribute is not valid for select. Try this…

<select asp-for="LanguageId" class="form-control form-control-sm" id="Language"
    style="width:100px">
    <option data-value="English">English</option>
    <option data-value="Fr">French</option>
</select>