Jquery mailto/tel：onchange

Question

我有一個從foreach循環獲取數據的下拉菜單。數據被放入數據屬性，我試圖用兩個圖標來填充。這是我對這一觀點：

<div class="row contact-full-container"> 
<div class="container"> 
    <div class="col-xs-12"> 

     <div class="panel panel-contact-full"> 
      <div class="panel-body"> 
       <div class="col-sm-5 form-group"> 
        <h3>@Model.InformationText</h3> 
        <label class="sr-only" for="contact-select"></label> 
        <div class="form-select"> 
         <select class="form-control" id="contact-select" title="Choose area" name=""> 
          @foreach (var contact in Model.ContactContentArea.ContentItems<ContactBlock>()) 
          { 
           <option data-phone="@contact.Phone" data-email="@contact.Email" data-image="@contact.Image">@contact.Name</option> 
          } 
         </select> 
         <i class="fa fa-caret-down"></i> 
        </div> 
       </div> 

       <div class="col-xs-8 col-xs-push-3 col-sm-4 col-sm-push-3"> 

       </div> 
      </div> 

      <div class="panel-footer"> 
       <div class="col-xs-5 col-sm-8 contact-icons"> 
        <a href="tel:" id="phone-href"><i class="fa fa-lg fa-phone"></i></a> 
        <a href="mailto:" id="mail-href"><i class="fa fa-lg fa-envelope"></i></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

，這裏是我的jQuery：

$('#contact-select').change(function() { 
    var email = $(this).children('option:selected').data('email'); 
    var phone = $(this).children('option:selected').data('phone'); 
    $('#phone-href').setAttribute('href', 'tel:' + phone); 
    $('#mail-href').setAttribute("href", "mailto:" + email); 

    // set phone-href to phone - mind phone: 
    // set email-href to email - mind email: 
}); 

當我跑我的網站，這兩個圖標的值的只是簡單的「電話：」和「 mailto：「，如果它只是onload或當我實際改變下拉菜單中的內容時無關緊要。任何人都可以發現我的錯誤嗎？

Answer 1

以上的答案是差不多吧。如果你使用數據（），你不需要把電子郵件，電話等數據 - 前

$('#contact-select').change(function() { 
     var email = $(this).children('option:selected').data('email'); 
     var phone = $(this).children('option:selected').data('phone'); 

$('#phone-href').attr('href', 'tel:' + phone); 
$('#mail-href').attr("href", "mailto:" + email); 
     // set phone-href to phone - mind phone: 
     // set email-href to email - mind email: 
}); 

Answer 2

試試這個
讓我知道它是否有效。

設置attribuut就像獲得一個。只有你使用第二個值。 像$(this).attr('test', 'Data i want to put in test')

$('#contact-select').change(function() { 
     //Don;t know about these 2. never used it like this. 
     var email = $(this).children('option:selected').data('data-email'); //<==== you forgot the data-email 
     var phone = $(this).children('option:selected').data('data-phone');//<==== you forgot the data-phone 

$('#phone-href').attr('href', 'tel:' + phone); 
$('#mail-href').attr("href", "mailto:" + email); 
     // set phone-href to phone - mind phone: 
     // set email-href to email - mind email: 
    });