Thanks for reading my question.

I'm creating a website for sharing novels. When creating a chapter, I hope the author can set a prechapter of a chapter. For example, if a reader want to read Chapter 2, he must read Chapter 1, since the preChapter of Chapter 2 is Chapter 1. Here is the code, a part of POST method form.

<input class="form-control" list="allChapters" id="preChapter" 
 name="chapter[preChapter]" value="<%= chapter.preChapter%>">
 <datalist id="allChapters">
  <option  value="0">None</option>   
  <% for (let i = 0; i < world.chapters.length; i++) {%>
    <% if(world.title === world.chapters[i].world ) { %>
      <option value="<%=world.chapters[i]._id%>"><%=world.chapters[i].title%></option>            
    <% }%>
  <% } %>
 </datalist>

The code works. The only problem is how the chapter list presents. In every option, it shows chapters._id of every chapter, which is kind of ugly and unreadable. I add chapters.title in the content of every option, so at least author can know the meaning behind each ID. However, it is still ugly. Please check the image for a clear picture.(All chapter names start from "test")

Image

I aim to hide the value shown in the option list and show only the content of each option tag, namely chapter.title.

I googled for a while and did not find any similar question. The closet one I found in document is that delete the value part and leave chapters.title in the content of option tag. In doing so, chapters.title will be the value sent in the POST request. However, it is weird to save the chapter.title but not chapter._id in model(I use mongoose in ths case), and it may involve several changes in my other js files.

I'm open to any suggestion and answers. Thanks again for reading my question and thanks in advance for any answer.