Это возможно с jQuery и опциями выбора?

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

Другим вариантом будет иметь country -> code карту в JavaScript

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

, а затем найдите код.

Answer 2

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

Вы можете попробовать это. Он связывается с событием изменения меню выбора, а затем получает значение атрибута «код» и устанавливает для него текст ввода.

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

Обязательно присваивайте каждому элементу идентификатор.

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

Если «код» не работает.Используйте «заголовок».