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

嗨，我想要些帮助

我有一个基于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>

使用此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
    <option value="uk" code="44">United Kingdom</option>
    <option value="gre" code="1">Greece</option>
    <option value="ger" code="2">Gemany</option>
    <option value="fra" code="3">France</option>
    <option value="ita" code="4">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>

---

如果我很了解您，您可以在

选择

中的

选项

中添加

数据属性

，您可以执行以下操作：

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函数 正如我使用下面的fiddler一样，不需要jquery

*你在哪个国家？
大不列颠联合王国
希腊
杰曼尼
法国
意大利
*你的电话号码是多少？
函数selectCountryCode（）{
var mySelect=document.getElementById（“国家”）；
var myInput=document.getElementById（“电话”）；
myInput.value=mySelect.options[mySelect.selectedIndex].value；
}

这似乎很管用，看起来与我想做的事情相符。。但是，如果我提交电话号码并点击submit，我仍然会得到完整的电话号码（即+44123456）？它应该在文本输入字段中包含整个值，因此包括国家代码yes。

$("select[name='country']").change(function(){
     $("input[name='country']").val("+"+ $('option:selected', this).attr('code'););
});

<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>

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

<div class="form-group" >
    <label for="country">* What country are you in ?</label>
    <select name="country" id="country" onchange="selectCountryCode();" class="form-control"> 
        <option value="11">United Kingdom</option>
        <option value="12">Greece</option>
        <option value="13">Gemany</option>
        <option value="14">France</option>
        <option value="15">Italy</option> 
    </select>
</div>

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


function selectCountryCode(){
  var mySelect   = document.getElementById("country");
  var myInput    = document.getElementById("phone");

  myInput.value = mySelect.options[mySelect.selectedIndex].value;


}