Fred Wuerges Fred Wuerges - 1 year ago 170
HTML Question

Enable phone call functionality on change event (jQuery)

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:(22) 2222-222" title="Branch A">Branch A</a>
<a class="phone branch-b" href="tel:(33) 3333-3333" title="Branch B">Branch B</a>
<a class="phone branch-c" href="tel:(44) 4444-4444" 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?

Answer Source

Did you try window.location = "tel:(44) 4444-4444" (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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download