Second select element is not showing on browser-CodePudding

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 be an issue with the Select element 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 >
          <form  asp-action="SearchStore" asp-controller="Home" method="get" enctype = "multipart/form-data">

              <div >
                  <div >
                      <div >
                          <label >Store # :</label>
                          <div >
                              <input  asp-for="StoreId" value="" style="width:100px;" />
                          </div>
                      </div>
                  </div>
              </div>

              <div >
                  <div >
                      <div >
                          <label >Store Name :</label>
                          <div >
                              <input  asp-for="StoreDescription" value="" style="width:350px;" />
                          </div>
                      </div>
                  </div>
              </div>

              <div >
                  <div >
                      <div >
                          <label >Language :</label>
                          <div >
                              <select list="Languages" asp-for="LanguageId"  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 >
                  <div >
                      <div >
                          <label >Group :</label>
                          <div >
                              <select list="Groups" asp-for="StoreTypeId"  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

CodePudding user response：

The second <select> is not shown, because the closing </select> tag is missing. <select> tags are used with <option> tags inside them.

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

The list attribute is not valid for select. If you want to use a datalist you should switch to <input> tags.

CodePudding user response：

Please use the <select></select> instead of <select/>

<select list="Groups" asp-for="StoreTypeId"  id="Group" style="width:100px"></select>

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

  <div >
    <div >
      <div >
        <label >Store # :</label>
        <div >
          <input  asp-for="StoreId" value="" style="width:100px;" />
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <label >Store Name :</label>
        <div >
          <input  asp-for="StoreDescription" value="" style="width:350px;" />
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <label >Language :</label>
        <div >
          <select list="Languages" asp-for="LanguageId"  id="Language" style="width:100px"></select>
          <datalist id="Languages">
                <option data-value="English">English</option>
                <option data-value="Fr">French</option>
            </datalist>
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <label >Group :</label>
        <div >
          <select list="Groups" asp-for="StoreTypeId"  id="Group" style="width:100px"></select>
          <datalist id="Groups">
                <option data-value="2">>Laura</option>
                <option data-value="3">Melanie Lyne</option>
            </datalist>
        </div>
      </div>
    </div>
  </div>
</form>