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 — Dai
– Dai, Commented Dec 27, 2021 at 8:37
"1 is expected here" @TBA. It's in the last paragraph of the question. — Andy
– Andy, Commented Dec 27, 2021 at 8: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
– Poromaloy Grou P, Commented Dec 27, 2021 at 8:42

Brad · Accepted Answer · 2021-12-27 08:37:57Z

1

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.

answered Dec 27, 2021 at 8:37

Brad

164k57 gold badges381 silver badges559 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KooiInc · Accepted Answer · 2021-12-27 09:35:52Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related