Question

我希望用户从下拉列表中选择他/她的国家/地区，然后我想在文本字段中显示国家/地区代码，以便用户输入他/她的号码。

这是包含电话号码的国家/地区列表：

  <select name="country">
  <option value="">Country...</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Albania">Albania</option>
   .
   .
   ETC till
   <option value="Zimbabwe">Zimbabwe</option>
   </select>

 <label for="phone">Phone Number</label><
 <input id="phone" name="phone" placeholder="user's number " required="" type="number">

当用户选择沙特阿拉伯时我希望文本字段显示966
我考虑过将国家/地区代码作为选项

中的值

我发现了类似的情况here，但我更愿意将其作为第二个选项

Answer 1

假设您使用的是jQuery：

<select name="country" id="country">
    <option value="">Country...</option>
    <option value="966">Saudi Arabia</option>
</select>

$('#country').change(function () {
    var countryCode = $(this).val();

    if (countryCode) {
        $('#phone').val(countryCode);
    }
});

JSFiddle

Answer 2

有几种方法可以做到这一点。 IMO更容易创建和填充一个JS对象，其中包含国家/地区名称作为索引，国家/地区代码作为值。但是tou也可以使用ajax ......

Answer 3

您可以使用jquery的更改事件侦听器，因此每次更改选择时，输入中的文本也会更改。您可以拥有一个包含国家/地区名称和代码的数组，每次更改时都会从该数组中获取国家/地区代码。

Click Here了解有关更改事件的信息。

Click Here有关关联数组的信息，这些数据将帮助您创建可以使用的数组。

Answer 4

@Taylor Burleson。你的代码看起来不错

<select name="country" id="country">
    <option value="">Country...</option>
    <option value="966">Saudi Arabia</option>
</select>

$('#country').change(function () {
    var countryCode = $(this).val();

    if (countryCode) {
        $('#phone').val(countryCode);
    }
});

拉纳，你应该在所有国家/地区提供数据库;在同一个db表中，您可以批量添加国家代码。当你调用db来获取包括代码在内的所有信息时用户界面，您应该能够使用上面的jquery代码显示它。

根据用户选择从下拉列表中显示国家/地区代码

4 个答案: