使用所選國家/地區的撥號代碼填充“電話號碼”字段

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>

我想做的是從下拉列表中選擇一個國家，然后使用所選國家的撥號代碼填充電話字段。 例如，如果我從選擇菜單中選擇United Kingdom ，那么“電話”字段的開頭應為+44碼，然后填寫我的電話，因此在服務器端，我應該輸入類似以下內容

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

Answer 1

使用這個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>

然后只需使用jquery將代碼添加到輸入字段

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

Answer 2

如果我理解你很好，你可以添加data-attributes的options里面select ，你可以這樣做：

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"));
    });
});

小提琴

Answer 3

您只需要一個javascript函數，就像我做了以下提琴手一樣，不需要jquery

https://jsfiddle.net/NWbsj/62/

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


}