<select>で選んだ電話番号にスマホからタップすると電話をかけられるようにしたい

Question

サイトのヘッダー部にセレクトボックスを設置して、選択した店舗をタップすると電話がかけられるようにしたいのですが、うまくできません、
以下のコードのどこが間違っているのか、教えていただけたらありがたいです。
よろしくお願いします。

<form> <select name="sample1"> <option value="">電話予約　店舗を選択してください</option> <option value="tel:03〇〇〇〇〇">高円寺店　03-0000-0000</option> <option value="tel:03〇〇〇〇〇">新橋店　03-0000-0000</option> </select> <input type=button onChange="top.location.href=sample1.options[sample1.selectedIndex].value" value="電話をかける"> </form>

Answer 1

実機での検証は行ってませんが、以下のような感じでaタグを動的に切り替えてみてはどうでしょうか？

<select name="sample1">
<option value="">電話予約　店舗を選択してください</option>
<option value="tel:[phone]">高円寺店　03-0000-0000</option>
<option value="tel:[phone]">新橋店　03-0000-0000</option>
</select>
<a>電話をかける</a>

var $a = $('a');
var $select = $('select');
$select
  .on('change', function () {
    var telNumber = $select.val()
    $a.attr('href', telNumber).trigger('click');
  });

Comments

[退会済みユーザー]

ありがとうございます！
実装してみましたが、うまく動きませんでした。私のやり方が間違ってたんだと思います。

Answer 2

リンクタグをクリックじゃないと動作しないはず

Comments

[退会済みユーザー]

ありがとうございますm(_ _)m

Answer 3

動作確認したものです。参考にしてみてください。
また、こちらはｊQueryを使用しないで行っています。

<script>
    function TextChange(obj){
        // 選択したお店の値とテキストを取得
        var idx = obj.selectedIndex;
        var value = obj.options[idx].value;
        var text = obj.options[idx].text;
        // hrefに値を挿入する
        document.getElementsByTagName('a')[0].setAttribute('href', value);
        // テキストの値を変更する
        document.getElementsByTagName('a')[0].innerHTML=text;
    }
</script>

<select onChange="TextChange(this)">
    <option value="tel:03〇〇〇〇〇">高円寺店　03-0000-0000</option>
    <option value="tel:03〇〇〇〇〇">新橋店　03-0000-0000</option>
</select>
<br/>

<a href="tel:">電話はこちらへ</a>

電話をかける方法はこちらが参考になると思います。

Comments

[退会済みユーザー]

ありがとうございます！
できました！すごいです。
コードとてもわかりやすいです。