How can I auto select value of dropdown using an ID value? - html

Question

I am creating a vehicle lookup service for visitors to my employer's website. By entering their vehicle details either manually or by entering their reg, the site products will be filtered to match fitment for that specific vehicle.
If the customer enters their reg and clicks submit, the results are captured in a hidden table on the same page. I want the manual selector values to update according to such hidden values.
How would I get the search data to show in the appropriate selector option? (I understand that none of the results is an option but if it was then how would I do it)
Here is the manual vehicle details code:
<div class="block-content">
<div class="level">
<select class="ymm-select" name="_make">
<option value="">-- Make --</option>
<option value="BMW">BMW</option>
</select>
</div>
<div class="level">
<select class="ymm-select disabled" name="_model" disabled="disabled">
<option value="">-- Model --</option>
</select>
</div>
<div class="level">
<select class="ymm-select disabled" name="_year" disabled="disabled">
<option value="">-- Year --</option>
</select>
</div>
<div class="ymm-clear"> </div>
<div class="ymm-extra" style="display:none">
<div class="ymm-category-container">
<div class="ymm-clear"> </div>
</div>
</div>
<button type="button" title="Search" class="button ymm-submit-any-selection">Search</button>
</div>
Here is the vehicle result data:
<table class="table" hidden="">
<tbody>
<tr>
<td>Make:</td>
<td id="dvla-search-make">FORD </td>
</tr>
<tr>
<td>Model:</td>
<td id="dvla-search-model">FOCUS</td>
</tr>
<tr>
<td>Year:</td>
<td id="dvla-search-year">2009</td>
</tr>
<tr>
<td>Engine:</td>
<td id="dvla-search-engine">1753cc</td>
</tr>
<tr>
<td id="dvla-search-fuel">Fuel Type:</td>
<td>DIESEL</td>
</tr>
</tbody>
</table>

Answer 1

You mean something like this?
window.addEventListener("load",() => { // when the page loads
document.querySelectorAll("[id^=dvla-search]").forEach(entry => { // find all table cells with ids starting with dvla-search
const val = entry.innerText.trim();
const name = entry.id.replace("dvla-search-","_"); // find the name of the
const elem = document.querySelector("[name="+name+"]") // select associated with the cell id
if (elem) { // if found
let vals = [...elem.querySelectorAll("option")].map(opt => opt.value)
if (!vals.includes(val)) { // only add if not already there
const opt = new Option(val,val,true,true); // make an option and select it
elem.appendChild(opt); // add the option
elem.removeAttribute("disabled"); // allow selection
}
else elem.value=val; // IF already there, select it
}
})
});
Here is the manual vehicle details code:
<div class="block-content">
<div class="level">
<select class="ymm-select" name="_make">
<option value="">-- Make --</option>
<option value="FORD">FORD</option>
</select>
</div>
<div class="level">
<select class="ymm-select disabled" name="_model" disabled="disabled">
<option value="">-- Model --</option>
</select>
</div>
<div class="level">
<select class="ymm-select disabled" name="_year" disabled="disabled">
<option value="">-- Year --</option>
</select>
</div>
<div class="ymm-clear"> </div>
<div class="ymm-extra" style="display:none">
<div class="ymm-category-container">
<div class="ymm-clear"> </div>
</div>
</div>
<button type="button" title="Search" class="button ymm-submit-any-selection">Search</button>
</div>
Here is the vehicle result data:
<table class="table" hidden="">
<tbody>
<tr>
<td>Make:</td>
<td id="dvla-search-make">FORD </td>
</tr>
<tr>
<td>Model:</td>
<td id="dvla-search-model">FOCUS</td>
</tr>
<tr>
<td>Year:</td>
<td id="dvla-search-year">2009</td>
</tr>
<tr>
<td>Engine:</td>
<td id="dvla-search-engine">1753cc</td>
</tr>
<tr>
<td id="dvla-search-fuel">Fuel Type:</td>
<td>DIESEL</td>
</tr>
</tbody>
</table>