php - 使用所选国家/地区的拨号代码填充“电话号码”字段

Question

您好，我需要一些帮助。

我正在 Bootstrap 上构建联系表单，这是我想要重点关注的代码部分

<div class="form-group">
    <label for="country">* What country are you in ?</label>
    <select name="country" class="form-control"> // list of all countries here - comes from database
        <option value="uk">United Kingdom</option>
        <option value="gre">Greece</option>
        <option value="ger">Gemany</option>
        <option value="fra">France</option>
        <option value="ita">Italy</option> 
    </select>
</div>

<div class="form-group">
    <label for="phone">* What’s your phone number ?</label>
    <input type="text" name="phone" value="" class="form-control" />
</div>

我想要做的是，当我从下拉列表中选择一个国家/地区时，用所选国家/地区的拨号代码填充电话字段。例如，如果我从选择菜单中选择英国，那么电话字段应该在开头有+44代码，然后填写我的电话，所以在服务器端我应该有这样的

$_POST['phone'] => +44 123456

Answer 1

如果我很了解您，并且您可以将data-attributes添加到select内的options，您可以执行以下操作:

HTML

<div class="form-group">
    <label for="country">* What country are you in ?</label>
    <select name="country" class="form-control">// list of all countries here - comes from database
        <option data-code="+44" value="uk">United Kingdom</option>
        <option data-code="+30" value="gre">Greece</option>
        <option data-code="+49" value="ger">Gemany</option>
        <option data-code="+33" value="fra">France</option>
        <option data-code="+39" value="ita">Italy</option>
    </select>
</div>
<div class="form-group">
    <label for="phone">* What’s your phone number ?</label>
    <input type="text" name="phone" value="" class="form-control" />
</div>

JavaScript

$(document).ready(function () {
    $("[name='country']").on("change", function () {
        $("[name='phone']").val($(this).find("option:selected").data("code"));
    });
});

<强> FIDDLE