set and display a specific datalist option in a dynamically loaded datalist with jquery-CodePudding

I have a datalist that is created on the fly based on the user's selection from a group select menu. After the group is selected, the datalist is created. The datalist allows users to choose from a "dropdown" list or just start typing in the input box and have the list filtered accordingly. It is structured like this:

<div id="projectSelect">
    <input type="text" name="ProjTitle" id="ProjTitle" placeholder="~ select project ~" list="projectList" autocomplete="off" value=""> 
    <datalist id="projectList">
        <select id="projectOptions">
             <option data-projid="390" value="Project 1">Project 1</option>
             <option data-projid="391" value="Project 2">Project 2</option>
             <option data-projid="392" value="Project 3">Project 3</option>
        </select>
    </datalist>
</div>

In the default use case, the user double-clicks on the input box, a drop down appears, a project is selected (clicked) and the rest of the page (a report) is populated. This all works great.

In the alternate use case for the page, the groupid and a particular projid are passed to the page via a stored browser value.

In this case, the presence of the 'groupid' triggers the group selector just fine and the datalist element is populated just as if the user had made the group choice. All good so far.

What I'm having difficulty doing is interacting with the datalist via jquery to select the item matching the projid that is passed AND displaying the resulting title of the project in the input control. The title of each project is the "value" of each option.

From lots of other references I've found, the way to select an item in a datalist is to actually set the value of the associated input like this:

$('#ProjTitle').val("Project 1");

This doesn't work in my case, because the value being passed to the page is the projid that is in the data-projid value for each option and not the project title that is the "value" of each option.

One approach I thought of using for this was to select (using jQuery) all of the datalist options and then use $.each() to loop over the items and find the matching projid. If I could do this, I would then get the valueof that option and pass it to ('#ProjTitle').val().

However, when I use jQuery to select the options like this:

let $options = $(document).find('option');

$options is empty.

Are the options for a datalist not accessible with jQuery for some reason? in the Firefox developer tools the options are greyed out as if they are hidden. If they can not be accessed directly, how can I get the "value" of the option that matches the projid?

What other approach could I use to set the selected value of the datalist (based on the projid)?

Edit I am suspicious that the dynamic loading of the content is in play here. The code to set the datalist is inside the $(function() { }) block of javascript so execution occurs after page load. Nonetheless, if I add console.log($('#ProjectList')); (or '#ProjectSelect') to the javascript I get the following in Firefox Developer Tools: Normally, I'd be able to access all the nodes for the element.

CodePudding user response：

I think the comments in the demo are sufficient to explain things, but feel free to ask any questions if you need a more details.

/* Assume this is the id passed to your page: */
const projid = 392

/* 
  Select the option element with a matching data-projid attr 
  and store the actual value for the selected option.
*/
const val = $(`[data-projid="${projid}"]`).val()

/*
  Select the input that is a direct descendant of the 
  #projectSelect element and set the value for it
  to the project name
*/
$('#projectSelect > input').val(val)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

<div id="projectSelect">
    <input type="text" name="ProjTitle" id="ProjTitle" placeholder="~ select project ~" list="projectList" autocomplete="off" value=""> 
    <datalist id="projectList">
        <select id="projectOptions">
             <option data-projid="390" value="Project 1">Project 1</option>
             <option data-projid="391" value="Project 2">Project 2</option>
             <option data-projid="392" value="Project 3">Project 3</option>
        </select>
    </datalist>
</div>