これはjQueryとSelectオプションで可能ですか？

Question

私はデータベースに国と地域コードのリストを持っています。私は選択肢が選択されたときに、国の市外局番でテキストフィールドを自動更新しようとしています。

ex。

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

もう1つのオプションは、country -> 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')); 
}); 

あなたはこれを試すことができます。それはselectメニューのchangeイベントに結びつき、 "code"属性値を取得し、それに対する入力のテキストを設定します。