Jquery mailto/tel: onchange

Question

我有一个下拉列表，它从一个前缘循环中获取数据。数据被放入数据属性中，我试图用这些属性填充两个图标。以下是我对此的看法：

<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:
});

当我运行我的站点时，这两个图标的值只是简单的"tel:“和"mailto:"，不管它是在加载还是在下拉列表中进行更改。有人能发现我的错误吗？

Answer 1

上面的答案几乎是正确的。如果您使用data()，则不需要将数据放在电子邮件、电话等前面。

$('#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

尝尝这个

如果有用的话请告诉我。

设置属性就像获得属性一样。只有你使用第二个值。就像$(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:
    });