使用 jQuery 和 Select 选项可以做到这一点吗？答案

【问题标题】：Is this possible with jQuery and Select options?使用 jQuery 和 Select 选项可以做到这一点吗？
【发布时间】：2011-12-15 02:17:34
【问题描述】：

我在数据库中有一个国家列表及其区号。 I am trying to auto update a text field with the countries area code when a select option is selected.

例如

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

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

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

这可能吗？还是有其他方法可以做到这一点？

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

【问题讨论】：

我认为您必须更好地解释您的问题。 code的目的是什么？
code 应该是国家的区号。因此，例如当用户选择加拿大时，文本字段 phone 会更新为 +1。

标签： php javascript jquery mysql forms

【解决方案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'));
});

另一种选择是在 JavaScript 中使用 country -> code 映射

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

然后查找代码。

【讨论】：

我认为这是最好的解决方案。 .data('phone') 应该是 .data('code') 虽然
这非常有效。谢谢！ @AlexPeattie 我也注意到了。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：