Enable phone call functionality on change event (jQuery)

Question

I'm trying to enable the phone call functionality on change event (HTML <select> tag) so as to reference the appropriate "tel:" value.

I run a test on Android (both version 2.2 and 4.0), using the default browser: I did not get the desired effect.

Below is my code:

HTML

<select class="call-us-options">
    <option value="">Select a branch:</option>
    <option value="branch-a">Branch A</option>
    <option value="branch-b">Branch B</option>
    <option value="branch-c">Branch C</option>
</select>
<a class="phone branch-a" href="tel:[phone]" title="Branch A">Branch A</a>
<a class="phone branch-b" href="tel:[phone]" title="Branch B">Branch B</a>
<a class="phone branch-c" href="tel:[phone]" title="Branch C">Branch C</a>

jQuery

$('.call-us-options').on('change', function() {
    if($(this).val()) {
        alert($('.'+$(this).val()).html());
        $('.'+$(this).val()).trigger('click');
    }
});​

Here's JSFiddle: http://jsfiddle.net/CZ3WF/1/

Is there any effective way to achieve that?

Roselane

Do you have functions associated to your a elements that will register the click event? – Pharynx

Answer 1

Did you try window.location = "tel:[phone]" (whatever the number is in the anchor corresponding to the selectIndex) with the onChange event for <select>?

Edit:

click() will only trigger javascript event handlers and will not actually go to that URL. Im not sure if this would work but can you try window.location once.

Jonahjonas

@FredWuerges thanks for giving working example. As very few people mark accepted by giving working example. – Antidote

Answer 2

$('.call-us-options').on('change', function() {

        window.location.href = $('.'+$(this).val()).attr('href');

});

Pharynx