I want to Select one option and auto-fill up the other column.

For example:

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

Now, i will select Product Name and the price will place automatically. I have looked on this link : https://select2.org/programmatic-control/add-select-clear-items

To be clear please check the image! and Video

Primary Solution by 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;
});