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

当我运行我的网站时，两个图标的值只是普通的 "tel:" 和 "mailto:"，无论是在加载还是在我实际更改某些内容时都没有关系在下拉列表中。任何人都可以发现我的错误吗？

Answer 1

试试这个
让我知道它是否有效。

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

Answer 2

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

$('#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:
});

Jquery mailto/tel: onchange

Jquery mailto/tel: onchange

html

jquery

onchange