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的{{1}}，但我需要将当前值传递给处理的脚本它

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

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

使用jQuery和Select选项可以实现吗？

4 个答案: