Quiero seleccionar una opción y autocompletar la otra columna.

Por ejemplo:

 | Product Name| Price | | ----------- | --------- | | T-Shirt | 100 | | Mobile | 200 | | Laptop | 500 |

Ahora, seleccionaré Nombre del producto y el precio se colocará automáticamente. He buscado en este enlace:https://select2.org/programmatic-control/add-select-clear-items

Para ser claro, por favor revise la imagen! y vídeo

Solución primaria por ahmelq:

 <form> <div class="row"> <div class="col"> <select class="form-select" aria-label="Default select example" id="items"> <option value="" selected hidden disabled>Select an item</option> <option value="tshirt-id" data-price="100">T-Shirt</option> <option value="mobile-id" data-price="200">Mobile</option> <option value="laptop-id" data-price="500">Laptop</option> </select> </div> <div class="col"> <input type="text" class="form-control" placeholder="Price" aria-label="price" id="priceField" disabled> </div> </div> </form>

 const items = document.getElementById('items'); items.addEventListener('change', function(e) { const selectedOptionIdx = e.target.selectedIndex; const selectedOption = e.target.options[selectedOptionIdx]; const price = selectedOption.dataset?.price || "This item has no price!"; const priceField = document.getElementById('priceField'); priceField.value = price; });