使用jQuery和Select选项是否可能？

Question

我在数据库中列出了国家及其地区代码。 当选择选择选项时，我尝试使用国家或地区代码自动更新文本字段。

例如

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

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

我需要将CA值传递给脚本，用户需要查看Canada。 基本上，我要问的是我是否可以创建一个新的选项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'));
});

另一种选择是在JavaScript中有一个country -> code映射

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

你可以试试看 它绑定到选择菜单更改事件，然后获取“代码”属性值并为其输入文本。