从属选择标签

时间:2017-08-25 00:02:25

标签: javascript mysql express ejs

我正在开发一个照片博客,博客的管理员可以创建相册并将图片上传到这些相册。管理员将能够选择封面图像来代表主页上的专辑 - 这是此表单的目的。

第一个选项标签用于选择管理员希望选择封面照片的相册。根据选择的相册,我希望第二个选项标签仅显示属于所选专辑的图像。目前它正在显示所有图像。

我在express / ejs工作。

非常感谢任何帮助 - 谢谢。

    <div class="upload-form">
      <form action="/cover" method="post" enctype="multipart/form-data">
        <h3 class="form-title">choose album cover</h3>

        <div class="form-group">
          <label for="album">album:</label>
          <select class="form-control" id="album-select" name="album" required >
            <option disabled selected value> select an album </option>
            <!-- For each album, render an <option> tag for the dropdown  -->
            <% albums.forEach((album, i) => { %>
              <option value="<%= album.id %>"><%= album.title %></option>
            <% }); %>
          </select>
        </div>
        <div class="form-group">
          <label for="title">cover image: (title - file name)</label>
          <select class="form-control" name="cover" required >
            <option disabled selected value> select a cover image </option>
            <% images.filter((image) => image.album_id === 19).forEach((image, i) => { %>
              <option value="<%= image.id %>"><%= image.title + " - " + image.file_name %></option>
            <% }); %>
          </select>
        </div>
        <button class="btn btn-primary" type="submit" style="width: 10em; margin-left: 18em" value="Submit">submit</button>
      </form>
    </div>

    <script>
      $( "#album-select" ).change(() => {
        slctdAlbumID = $('#album-select option:selected').val();
        console.log("ID", slctdAlbumID);
      });
    </script>

0 个答案:

没有答案