这可以通过 jQuery 和 Select 选项实现吗？

Question

我的数据库中有一个国家及其区号的列表。当选择一个选择选项时，我试图使用国家/地区代码自动更新文本字段。

前任。

<select name="country">
    <option value="CA" code="+1">Canada</option>
    ...
</select>

<input type="text" name="phone" />

我需要将值 CA 传递给脚本，并且用户需要查看加拿大。基本上我要问的是我可以创建一个新选项 code 并让 jQuery 更新我选择的文本字段。

这可以吗？或者还有其他方法可以完成这个任务吗？

编辑：“代码”应该是该国家/地区的区号。例如，当用户选择加拿大时，文本字段 phone 会更新为 +1。我知道我可以将 value 设置为 +1，然后使用 .change() 更新 phone 的 .val() 但我需要将当前值传递给处理它的脚本。

Answer 1

我建议您使用 HTML5 data- 属性而不是自定义属性：

<select name="country">
    <option value="CA" data-code="+1">Canada</option>
    ...
</select>

<input type="text" name="phone" />

然后将处理程序绑定到 change 事件：

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

或者使用较少的 jQuery：

$('select[name="country"]').change(function() {
    $('input[name="phone"]').val(this.options[this.selectedIndex].getAttribute('data-code'));
});

另一种选择是一个国家-> code 在 JavaScript 中映射

var map = {
    'CA': '+1',
    ...
};

，然后查找代码。

Answer 2

确保为每个元素分配一个 id。

var code = $('#country option:selected').attr('code');
$('#phone').val(code);

如果“代码”不起作用。使用“标题”。

Answer 3

不完全确定你在问什么，但这有帮助吗？

$('select[name=country]').change(function() {

    $('input[name=phone]').val($(this).find('option:selected').attr('code'));

    alert('Do something else with this: ' + $(this).val());
});

Answer 4

$("select[name='country']").change(function() {
    $("input[name='phone']").val($(this).find('option:selected'));
});

你可以试试这个。它与选择菜单更改事件相关，然后获取“code”属性值并将输入的文本设置为其。