How to get option tag custom data value using pure JS?

Question

function calculateDeliveryCharge()
 {
     var CA=document.getElementById("pickup");
     var c=CA.options[CA.selectedIndex].getAttribute('data-area');

    alert(c);
 }

<div class="container">
    <div class="row">
         <div class="col-12">
            <select id="pickup" placeholder="পিকআপ এলাকা নির্বাচন করুন">
              <option value="">পিকআপ এলাকা.....</option>
              <option value="300 Feet"data-area="1">৩০০ ফিট (300 Feet)</option>
              <option value="Adabor" data-area="1">আদাবর(Adabor)</option>
              <option value="Adarsha Nagar(Badda)"data-area="1">আদর্শ নগর(বাড্ডা)- Adarsha Nagar(Badda)</option>
              <option value="Aftab Nagar"data-area="1">আফতাব নগর(Aftab Nagar)</option>
              <option value="Aga Nagar"data-area="1">আগা নগর(Aga Nagar)</option>
              <option value="Agargaon"data-area="1">আগারগাঁও(Agargaon)</option>
              <option value="Ahalia-Uttara"data-area="1">আহালিয়া-উত্তরা(Ahalia-Uttara)</option>
              <option value="Ahmed Nagar"data-area="1">আহমেদ নগর(Ahmed Nagar)</option>
              <option value="Ainusbag"data-area="1">আইনুসবাগ(Ainusbag)</option>
              <option value="Ainusbag-Dakshinkhan"data-area="1">আইনুসবাগ-দক্ষিণখান(Ainusbag-Dakshinkhan)</option>
              <option value="Ajiz Market"data-area="1">আজিজ মার্কেট(Ajiz Market)</option>
              <option value="Alatunnessa School Road"data-area="1">আলাতুন্নেছা স্কুল রোড(Alatunnessa School Road)</option>
              <option value="Alubazar"data-area="1">আলুবাজার(Alubazar)</option>
              <option value="Amin bazar"data-area="1">আমিন বাজার(Amin bazar)</option>
              <option value="Apollo"data-area="1">অ্যাপোলো(Apollo)</option>

            </select>
         </div>
     </div>
     <button class="border-1 p-2 bg-danger text-white"onclick="calculateDeliveryCharge()">ডেলিভারি চার্জ দেখুন</button>

</div>

I want to get the custom data attribute "data-area" value, 1 expected is here but I am getting null every time. What is the problem in my code and what is the solution?

Does this answer your question? [Accessing data attributes with dataset JavaScript](https://stackoverflow.com/questions/66029026/accessing-data-attributes-with-dataset-javascript) — Dai, Dec 27 '21 at 08:37
"1 is expected here" @TBA. It's in the last paragraph of the question. — Andy, Dec 27 '21 at 08:37
@TBA I have checked again but localhost provides alert null, is it a browser issue ? why am I facing this problem? — Poromaloy Grou P, Dec 27 '21 at 08:42
@TBA then what's the problem? Every data-area attribute has a value of 1. — Andy, Dec 27 '21 at 08:47
@PoromaloyGrouP like andy is saying, check when you are calling your script — TBA, Dec 27 '21 at 09:05

score 1 · Answer 1 · answered Dec 27 '21 at 08:37

This is a bit easier.

document.querySelector('#pickup option:checked').dataset.area

If we use #pickup, we selecting by ID as you have above. But by also specifying option:checked, we're looking for the currently selected option. (:checked is a bit weird here, but it's consistent with how other input elements work, such as checkboes.) Next, if you want the area data option, we can access it on the dataset property directly.

KooiInc · Answer 2 · 2021-12-27T09:35:52.540

If nothing is selected, or the option does not contain the data-area property, your result will be not as expected.

It is generally not a good idea to use inline event handlers. Here's a snippet using event delegation.

// => onclick="calculateDeliveryCharge()" becomes
document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.nodeName === `BUTTON`) {
    const selectr = document.querySelector("#pickup option:checked");
    // find the selected option using a css selector ^^^
    // this statement returns the option element when something 
    // is selected, null if nothing is selected
    console.clear();
    
    if (selectr && 
        selectr.dataset.area) {
      //        ^ a data attribute value can be found using the elements' "dataset"
      return console.log(`Area: ${selectr.dataset.area}`);
    }
    
    console.log(`No area or nothing selected yet`);
  }
}

<div class="row">
  <div class="col-12">
    <select id="pickup" placeholder="পিকআপ এলাকা নির্বাচন করুন">
      <option value="">পিকআপ এলাকা.....</option>
      <option value="300 Feet" data-area="1">৩০০ ফিট (300 Feet)</option>
      <option value="Adabor" data-area="1">আদাবর(Adabor)</option>
      <option value="Adarsha Nagar(Badda)" data-area="1">আদর্শ নগর(বাড্ডা)- Adarsha Nagar(Badda)</option>
      <option value="Aftab Nagar" data-area="1">আফতাব নগর(Aftab Nagar)</option>
      <option value="Aga Nagar" data-area="1">আগা নগর(Aga Nagar)</option>
      <option value="Agargaon" data-area="1">আগারগাঁও(Agargaon)</option>
      <option value="Ahalia-Uttara" data-area="1">আহালিয়া-উত্তরা(Ahalia-Uttara)</option>
      <option value="Ahmed Nagar" data-area="1">আহমেদ নগর(Ahmed Nagar)</option>
      <option value="Ainusbag" data-area="1">আইনুসবাগ(Ainusbag)</option>
      <option value="Ainusbag-Dakshinkhan" data-area="1">আইনুসবাগ-দক্ষিণখান(Ainusbag-Dakshinkhan)</option>
      <option value="Ajiz Market" data-area="1">আজিজ মার্কেট(Ajiz Market)</option>
      <option value="Alatunnessa School Road" data-area="1">আলাতুন্নেছা স্কুল রোড(Alatunnessa School Road)</option>
      <option value="Alubazar" data-area="1">আলুবাজার(Alubazar)</option>
      <option value="Amin bazar" data-area="1">আমিন বাজার(Amin bazar)</option>
      <option value="Apollo" data-area="1">অ্যাপোলো(Apollo)</option>
    </select>
  </div>
</div>
<button class="border-1 p-2 bg-danger text-white">ডেলিভারি চার্জ দেখুন</button>

</div>

How to get option tag custom data value using pure JS?

2 Answers2