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

Here is my HTML:

         <div >
                      <div >
                           <div >
                              <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 onclick="calculateDeliveryCharge()">ডেলিভারি চার্জ দেখুন</button>

       </div>

Here is my JS:

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

    
        
        alert(c);
      

     }
    

     </script>

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

CodePudding user response：

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.

CodePudding user response：

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 >
  <div >
    <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 >ডেলিভারি চার্জ দেখুন</button>

</div>